css - 使用 CSS 从右向左旋转图像

Question

是否可以使用纯 CSS 在 DIV 中从右向左旋转图像，我的意思是不使用任何 JavaScript？

Answer 1

这可以使用 CSS3 的 transform: rotate(...) 或一些专有的 IE 过滤器。参见 an example或 the specification .

例如

position:absolute;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg); /*opera*/
transform: rotate(90deg); /*likely future standard*/
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/*for filter: 1==90deg, 2==180deg, 3==270deg*/

请注意，此转换是渲染转换；所以旋转不会影响布局(类似于 position: relative 内容)。这就是为什么绝对定位通常是这里最容易使用的途径。另外，请注意规范不是最终的；细节可能会发生变化(特别是转换如何与布局交互 - 坚持使用 position:absolute; 的另一个原因)。

最后，您可能对动画过渡感兴趣；作为一个随机搜索的示例，您可以查看 here .这些也还没有最终确定，尽管在 firefox、webkit 和 opera 中部分实现了:这表明该标准可能会坚持下去。不间断动画是 Apple 的一项提案，目前仅在 webkit 中实现，并且比过渡要复杂得多；除了技术演示，我会远离这些，因为标准可能会以潜在的复杂方式发生变化。