使用CSS从右向左旋转图像

Question

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

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中实现:标准可能会坚持下去.不间断动画是Apple提案,到目前为止仅在webkit中实现,并且比转换复杂得多; 除了技术演示之外,我会远离这些,因为标准可能会以可能复杂的方式发生变化.