Question

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

Answer 1

使用CSS3的transform: rotate(...)或某些专有的IE过滤器是可能的。请参阅an example或the specification。

e.g。

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

最后，您可能对动画过渡感兴趣;作为随机Google搜索示例，您可以查看here。这些还没有最终确定，虽然部分在firefox，webkit和opera中实现：标准可能会坚持下去。不间断动画是Apple提案，到目前为止仅在webkit中实现，并且比转换复杂得多;除了技术演示之外，我会远离这些，因为标准可能会以可能复杂的方式发生变化。

Answer 2

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

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

如果你正在寻找一个动画旋转，那就更难了。 CSS规范中使用transition和transform样式支持动画，但目前支持得非常差。 Safari和Chrome应该能够做到，但你会遇到其他任何事情。

以下链接可让您入门：http://webkit.org/blog/138/css-animation/

使用CSS从右向左旋转图像

2 个答案: