使用CSS将图像从右侧旋转到左侧

Question

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

- user160820

Answer 1

这可以通过CSS3的transform: rotate(...)或一些专有的IE过滤器来实现。参见示例或规范。

例如：

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;的原因）。

最后，您可能会对动画过渡感兴趣；作为一个随机搜索的示例，您可以在这里查看。这些也尚未最终确定，虽然在firefox，webkit和opera中部分实现：标准很可能会保持不变。不间断动画是苹果提议的，目前只在webkit中实现，并且比转换复杂得多；除了技术演示之外，我会远离这些，因为标准可能会以潜在复杂的方式发生变化。

- Eamon Nerbonne

---

+1个正确答案。（但请注意，您的注释有误：//不是CSS中的有效注释） - Spudley

Answer 2

这个问题不太清楚他是在寻找静态旋转 - 即在屏幕上以固定角度显示 - 还是动画旋转；例如元素在屏幕上旋转。

对于静态旋转，@Eamon Nerbonne的答案绝对是正确的。你需要使用transform和filter样式。（但请注意，filter的语法无效CSS，在我的测试中可能会导致一些非IE浏览器忽略它后面的任何样式，所以你可能要小心）

如果你正在寻找动画旋转，那就更难了。CSS规范支持使用transition和transform样式进行动画，但目前支持非常非常差。Safari和Chrome应该能够做到，但其他浏览器可能会有问题。

这里有一个链接可以帮助你入门：http://webkit.org/blog/138/css-animation/

- Spudley