问题标签 [css-transforms]

对于我的HTML 图片查看器，我尝试通过 CSS 自动旋转我的一些图片-*-transform: rotate（90 度）。因为图片的宽度大于高度，所以img元素太小，旋转的图片覆盖了上面和下面的一些文字。

为了修复/解决这个问题，我在div它周围创建了一个预期大小的。这导致了另一个问题，即图像现在也放错了位置。为了修复/解决第二个问题，我div围绕它创建了第二个，它修复了错误的位置。

一个例子（在线：这里）：

• 图片大小 w=1024，h=768。
• 我将它旋转 90 度。
• 外层div：<div style="display:block; width:768px; height:1024px;">
• 内部div：<div style="position:relative; left:-128px; top:128px; display:block;">

这导致正确/预期/想要的定位和对齐。

我想知道是否有更优雅/更清洁的方式来做到这一点。

从将宽度/高度更改为 CSS 旋转的 div 触发顶部/左侧重新定位之后，我需要一些帮助来解决 CSS 旋转和动态宽度/高度。

我理解transform-origin并认为我需要在更新元素的宽度或高度的同时动态更新它。我只对技术解决方案感兴趣，而不是任何跨浏览器的聪明才智，因此演示只使用-webkit前缀。

HTML

CSS

JavaScript

在第二个演示中，添加 CSS

并将角度滑块更新value为60

通过滑块修改宽度/高度时会产生正确的结果，因为元素在x, y尺寸上增长和缩小而不移动位置。但是，现在不再围绕所需的（中心点）原点旋转元素。

我已经尝试了一些变体（mousedown、mousemove、change），我认为会在修改宽度/高度之前设置原点，但<div>仍在移动位置。

我假设 jQuery 正在同时应用 CSS 更改，而我认为原点需要在宽度/高度更改之前更新。

基本上，如果形状已经旋转，我希望形状始终围绕中心点旋转，并且在修改宽度/高度时不移动。

我正在尝试创建一些看起来与此类似的从上到下的文本，

但是我的代码正在产生正确的效果，但严格来说并不正确，因为它是这样输出的

这是我的 CSS，我怎样才能使它显示为第一个示例而不是第二个示例？

我在我的网站上显示一个元素，我以 -90 度旋转，但如果浏览器不支持 CSS 转换，则该元素看起来定位错误并且不是很好。现在我想用 JavaScript 或 jQuery 检测（如果 jQ 或 JS 无关紧要，因为我在我的网站上使用/加载了 jQ）是否支持通过 CSS 进行的这种旋转？

我知道Modernizr，但只是为了那件小事，我不想包含整个库（并降低网站速度加载）。

看这张图片：

http://i56.tinypic.com/311vw51.png

您会注意到图像 2 和 3（左侧）的部分边框被切断，不完全可见。我正在使用变换：旋转（xdeg）；CSS 规则。

除了添加更多填充之外，还有什么可以做的吗？我尝试更改 z-index 但这似乎没有帮助？我错过了什么吗？

一个 3d 旋转的 div 穿过另一个具有更高 z-index 的 div。我想防止这种情况，并强制遵守 z-index 定义。我以为 -webkit-transform-style: flat; 会解决这个问题。有人有建议吗？

我正在创建一个可以使用键盘控件旋转的 3D 立方体。但是在旋转之后，每个面的部分会失去交互性（鼠标事件不会在包含的元素上注册）。任何人都知道可能导致该问题的原因是什么？

很难解释，所以这里有一个测试站点的链接：

http://joe-morgan.net/projects/matrix3d/

当然，它只适用于 Safari 和 Chrome。

乔摩根

以下 CSS 在 Webkit 中运行良好。还没有在 Opera 中检查过，但我知道它在 Firefox 中不起作用。谁能告诉我为什么？

正确的类肯定会应用到我的 HTML（用 Firebug 检查它，我确实看到了-moz-animation: 500ms ease 0s normal forwards 1 arrowRotateDot属性.arrow）。

这在 IE9 中也不起作用，尽管我最初确实有-ms-animation:...和-ms-transform:.... 我认为它应该在 IE9 中工作，但当它不支持时，我只是假设 IE 还不支持这些。然而，既然它不能在 Firefox 中运行，也许还有其他事情正在发生。

虽然 2d 旋转似乎在我的 Froyo 浏览器（Nexus One）上工作，但所有围绕 Y 轴旋转的尝试似乎只是围绕 Z 轴旋转。我还尝试了 -webkit-transform: matrix3d 而不是 roateY，但它也没有用。

是否有解决方法，或者是否有成功的报告表明它已在 Android 上成功使用？

-webkit-transform: translate(5px, 5px)我想知道和之间有什么区别-webkit-transform: translateX(5px) translateY(5px)

有性能差异吗？因为translateX也用于 3D 变换。所以我的问题是：计算变换有什么不同吗？我可以说它translateX更快，因为它使用 GPU 吗？可以？

我如何衡量性能？