问题标签 [css-transforms]

我有一个包含 3D 转换元素的元素。在 webkit 中，直到我将鼠标悬停在父元素上或离开父元素时，父元素的内容才会正确重绘。

我正在尝试创建一个包含透视地图的应用程序，我可以在其中添加地图标记（绝对定位的 DIV），但是我认为我对转换/3D 空间有点混乱。

以下面引用的小提琴为例，我希望 DIV 1 位于位置 0,0 （它是平放时的位置 - 单击按钮）但是在它的直立位置左侧有一个小边距（这似乎由透视值控制，所以我猜我需要以某种方式对此进行补偿？）。

同样，Div2 在画布的最末端似乎处于正确的位置，但是如果我将顶部/左侧值更改为 100,100，它会隐藏在画布下方 - 我是否需要通过额外的变换来提高标记位置？ ? 轴？如果是这样，为什么这对于位于画布顶部的 Div 不是一个问题？

http://jsfiddle.net/vEWEL/9/

所以我试图扭曲一个静态的谷歌地图结果，所以看起来你正在“向下看”。无论如何，我已经使用 CSS3 转换让它工作：

这给了你：

不过，我想在它周围加上一个边框。

如果我添加

我反而得到：

我怎样才能使该边界正确应用？我需要做一些其他的 CSS 技巧吗？（是的，这仅适用于 Chrome 和 Safari，无论我遗憾地添加了其他扩展程序）。

在 Webkit 中，3D CSS 变换是否会设置为无限重复，即使它或父元素通过样式 (CSS) 从视图中隐藏也会继续吗？

我问的原因是我在我正在开发的页面上看到异常高的 CPU 使用率。

如果有人知道诊断此问题的好方法（例如，可视化页面上 CPU 周期的位置，而不是每个选项卡的全面 CPU 使用情况），我将不胜感激。

轶事证据（移除隐藏的 CSS 动画）表明动画确实在后台运行。有谁知道如何防止这种情况？

这是我的代码： http: //jsfiddle.net/bnookala/b2Yz8/3/这是结果：http: //jsfiddle.net/bnookala/b2Yz8/3/embedded/result/

行为非常简单：单击红色 div 后，会发生 3D 变换，蓝色 div 可见。但是，试图扭转这种行为（通过删除flip类）是行不通的。第二个jQuery.bind没有收到click事件 - 它被红色 div 捕获。这也很明显，输入框（在蓝色 div 中）无法接收鼠标焦点。我试过设置 z-indexes 来解决这个问题，但这似乎不起作用。

目前我正在使用以下代码以相同的速度翻译 x 和 y：

我想平移 X 轴的速度比 Y 慢。是否可以指定类似于：

提前致谢！

我一直在使用Impress.js进行演示，并且正在考虑对其进行调整以在 iPad 上使用。但我担心 Impress 如何将变换应用于每张幻灯片。不是仅仅使用 CSS，而是将转换作为数据属性放入 HTML，然后使用 Javascript 应用。

这让我觉得这是一种过于复杂和困难的做事方式。不过，我没有很多使用数据属性的经验，所以我想就此获得一些意见。正常编写 CSS 会更好，还是使用数据属性的好处大于麻烦？

我有一些用transform: rotate()和定位的导航元素box-shadow。当您将它们悬停时，它们会“弹出”一点，表示您可以点击它们。在 Chrome 和 Safari 中（表明这是一个 webkit 问题），当您将某些导航项目悬停时，框阴影会变得混乱并掩盖其他随机元素的一部分。它在 Firefox 中运行良好。

我做了一个 jsfiddle 来描述这个问题，因为我可以弄清楚如何：

http://jsfiddle.net/Q39eJ/1/

将鼠标悬停在前一个或前两个元素上，然后您将看到问题的实际效果。

我正在处理的网站在这里有问题：

http://temp.go-for-english.com/

（如果这不起作用，URL 将很快更改为http://www.go-for-english.com ）

如果有人能找到一种仍然使用 CSS3 使其看起来正常的解决方法（也许在悬停时再次设置 z-index，或者我不确定的其他一些奇怪的解决方法），我将不胜感激： ）我真的不想诉诸图像:(

更新：

我被告知它在 Windows Chrome 上看起来不错 =\ 我使用的是 Mac OSX 10.6，这是我看到的行为的屏幕截图：

http://s9.photobucket.com/albums/a74/nZifnab/?action=view¤t=Screenshot2012-01-19at13205PM.png

我的客户也指出了这个问题，因为他们使用的是 Safari。

是否可以在左上角（0%，0%）指定原点进行缩放，并在 CSS3 中指定不同的原点（中心）进行旋转？如果有帮助，我只使用 webkit。

我目前正在使用转换列表（即 -webkit-transform: scale(newScale) rotate(newRotate)

但似乎不可能在两次传递之间更改原点。有没有更好的方法来看待这个？目前，如果我缩放一个对象并以默认中心的原点旋转它，元素的位置现在是关闭的，所以当你拖动元素时，光标仍然在元素的左上角，而它应该是在中心。将原点更改为中心以对其进行缩放可以解决此问题，但会出现旋转和翻转的新问题。

只是我似乎无法弄清楚的一个小元素，我希望这里的集体知识可以为我指明正确的方向。

当用户将鼠标悬停在 div 上时，我想旋转 div 内的图像。可以在此处找到代码示例：http: //jsfiddle.net/mashby/eCzmj/

现在，动画是通过将鼠标悬停在图像本身而不是整个 div 上来触发的。

不知道是否有可能做我想做的事，但提前感谢任何确认或建议！