使用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中实现：标准可能会坚持下去。不间断动画是苹果公司的一项提案，目前仅在webkit中实现，并且比转换复杂得多;除了技术演示之外，我会远离这些标准，因为标准可能会以复杂的方式发生变化。

Answer 2

问题是不清楚他是否在寻找静态旋转 - 即在固定角度的屏幕上显示 - 或动画旋转;例如元素在屏幕上旋转的位置。

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

如果您正在寻找一个动画旋转，它更难。在CSS规范中支持动画，使用transition和transform样式，但目前支持非常差。 Safari和Chrome应该可以做到这一点，但是你会为其他任何事情而烦恼。

这里是一个让你开始的链接：http://webkit.org/blog/138/css-animation/