旋转图像

Question

我想通过相隔90度的四个方向在网页上旋转图像。我更喜欢这种情况发生在客户端机器上。这可以用css完成吗？或者我需要使用javascript，我需要旋转背景图像，这是一种在页面上重复的图案

感谢您的时间。

Answer 1

CSS3有效，但我担心的是遗留兼容性。 According to this matrix，它不适用于IE 9之前的版本。

ImageMagick是一个明显的解决方案，但这是服务器端，所以它确实无法解决您的挑战。

我认为我倾向于Jquery Rotate，这是一个非常完善的插件，它确实在纯CSS解决方案上保持了表示层的简单优势。在兼容性的基础上，它现在远远超过纯CSS3。 <sarcasm>Thanks, Microsoft.</sarcasm>

Answer 2

@tada;你可以使用css3 rotate属性作为petah说

div{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
}

＆安培;对于IE，你可以使用IE过滤器：

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

了解更多信息，请查看以下链接：

http://snook.ca/archives/html_and_css/css-text-rotation

http://css-tricks.com/snippets/css/text-rotation/

Answer 3

您可以使用CSS3

查看http://davidwalsh.name/css-transform-rotate

-moz-transform:rotate(120deg);
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);
-ms-transform:rotate(120deg);
transform:rotate(120deg);