问题标签 [css-transforms]

我有一个基于 CSS3 构建的非常复杂的网站，它的 html 元素经过 3d 转换、旋转、翻转、翻转，并且通常会失真。

我试图找出其中一个元素在屏幕上的位置，但看不到任何方法。我想知道是否有人有任何巧妙的想法。

或者，如果有人可以解释背后的数学-webkit-perspective，我可以弄清楚这个位置，因为这是我唯一不确定如何建模的东西。

我找不到答案的“简单”问题——-webkit-perspective在数学上实际上做了什么？（我知道它的效果，它基本上就像一个焦距控制）例如是什么-webkit-perspective: 500意思？！？

我需要找到被移动的东西的屏幕位置，除其他外，-webkit-perspective

我想将翻译转换应用于 a <div>，然后能够将其返回<div>到其原始位置。

对取反值应用相同的操作不会将 DIV 返回到屏幕中的原始位置：

• 应用翻译：-webkit-transform: translate(300px, 400px);

• 不起作用的“撤消”效果：-webkit-transform: translate(-300px, -400px);

我想控制撤消级别，因此重置转换不是一种选择。

我有一个高尔夫记分卡生成器。从结构上讲，该页面有一个 .printarea 类的 div 包装了一个 1072px 宽的表格。

我已经逐渐得到它，因此打印在所有主要浏览器中都以横向显示单个页面。

在 Firefox 中，如果在 BODY 上指定了旋转和缩放，那么缩放将无法工作。所以我将旋转移动到包含其他所有内容的 DIV。这实现了旋转但偏移了表格，因此右侧（表格底部）和顶部（表格右侧）发生了一些裁剪。

我试图用边距和绝对定位来纠正这个问题，但这导致表格的小块不连贯的部分被分流到第二页。将比例缩小到很小的比例也不会解决第二页的位置问题。

使用原始设置我最终得到了position:absolute; -moz-transform-origin: 400px 900px; 这会丢失表格顶部（页面左侧）的一部分并取代最后两行，尽管事实上表格的底部（页面右侧）距离边缘很容易 3 英寸纸。即使缩小到很小的比例也不能纠正位移。

这是一张卡片的静态副本：http: //egolfplan.com/example.html

在帖子的最后，我将添加打印的 PDF 屏幕截图。

当前的 CSS

这被缩放到 68%

扩大到 48%

-moz 变换原点：400 像素 900 像素；

因此，我正在研究 Web 浏览器的特定应用程序，该应用程序要求我将颜色表示为直接的 Alpha 通道，并将黑白 Alpha 通道作为单独的元素。（两种类型的示例

我知道很多个月以前，IE 支持一些不正当的过滤器选项，但由于我正在做 css3 转换，我需要它在现代浏览器中工作，最好是 Chrome。

基本上我想做的是有一个应用了 CSS 变换的元素，特别是最有可能旋转的元素，然后我想把它复制到另一个应用了黑白变换的同等大小的元素。另一个好处是将原始元素设置为使用直接 alpha，但我现在可以不用它。

我还没有找到任何可以开始调查的路线。如果你有的话，我将非常感激。我最后的手段是开始在 WebGL 或 Canvas 中做事并在那里修改输出。

我知道倾斜是可能的，但我看不到一种方法可以使每个角落倾斜特定的角度。

这是我正在进行的项目：http: //map.ucf.edu/

专门查看菜单中的选项卡。现在我正在使用图像，我想为有能力的浏览器更改它。

我知道可以创建CSS 梯形，但这是使用没有内容的边框。最终结果还需要一些圆角。

编辑：从Zoltan Toth 的解决方案开始，我能够做到这一点：demo

当前的 CSS3 是否有可能沿弧线或曲线平移对象（特别是 DIV）？这是帮助说明的图像。

我正在使用它来旋转 divonclick事件：

这逆时针旋转：

但它工作一次。另一个问题是，如果我在第一个事件之前单击第二个事件，那么第一个事件将自动不起作用。

我实际上希望这个 div 每次单击时都会旋转。这是示例 http://maatren.com/earth/

在rotate 和revrotate 中，我只使用transform 和transition 来旋转div，而在id earth 中，我使用背景图像，没有任何transform 和transition。

我将以下 CSS 转换应用于 HTML 输入框。

当我在输入框中键入文本直到它填满可见区域时，插入符号继续越过输入的边缘并被隐藏。通常，插入符号和文本会在您键入时滚动。

一旦插入符号达到预缩放输入的宽度，文本最终会开始滚动。在计算何时滚动文本时，浏览器似乎忽略了缩放。

这只是 WebKit 浏览器的问题（在 Chrome 和 iPad 上测试过）。-moz-transform 等效项在 FireFox 中运行良好。zoom 属性在 webkit 中运行良好，但在 iPad 上缩放时不够平滑，所以我不能真正将它用于我的项目。

你可以在这里看到一个例子：http: //jsfiddle.net/4Kv6w/

第一个输入框带有 -webkit-transform 缩放。第二个框是缩放设置。第三个是正常的。

任何帮助将不胜感激。

编辑- 通过使用 -webkit-transform 将输入框移动到左侧，您也可以在不缩放的情况下解决问题。这是一个例子：http: //jsfiddle.net/4Kv6w/15/

当使用 CSS 为旋转的元素添加阴影时，阴影取决于元素的旋转。这是一个例子：

是否可以计算出阴影在旋转后应该落在哪里，以便阴影看起来来自所有元素上的相同光源？我假设我必须用javascript或服务器端来做，这很好。