-moz-transform:rotate(90deg)
-webkit-transform:rotate(90deg)
transform:rotate(90deg)
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
上面代码前三行是css3，第四行是ie滤镜的简单的90度的整数倍旋转方式，更加复杂的度数要用矩阵，需要的话可以查查资料
注：左旋把90改为-90，rotation=1改为rotation=3.
注：如果你的层上还有文字什么的，也会被旋转，所以有文字的话，和背景图放在不同的层上，旋转有背景图的层
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>CSS3旋转图片</title>
<style>
demo {
width: 100px
height: 75px
background-color: yellow
border: 1px solid black
margin:20px
}
#div2 {
transform: rotate(30deg)
-ms-transform: rotate(30deg)/* IE 9 */
-moz-transform: rotate(30deg)/* Firefox */
-webkit-transform: rotate(30deg)/* Safari and Chrome */
-o-transform: rotate(30deg)/* Opera */
}
#div3 {
transform: rotate(90deg)
ms-transform: rotate(90deg)/* IE 9 */
moz-transform: rotate(90deg)/* Firefox */
webkit-transform: rotate(90deg)/* Safari and Chrome */
o-transform: rotate(90deg)/* Opera */
}
</style>
</head>
<body>
<div class="demo" id="div1">你好。这是一个 div 元素。</div>
<div style="clear:both"></div>
<div class="demo" id="div2">你好。这是一个 div 元素。</div>
<div style="clear:both"></div>
<div class="demo" id="div3">你好。这是一个 div 元素。</div>
原图<img src="http://www.baidu.com/img/bd_logo1.png" alt="Flowers" style="width:200px">
90°旋转后的图片
<img src="http://www.baidu.com/img/bd_logo1.png" alt="Flowers" style='width:200pxtransform:rotate(90deg)'>
</body>
</html>
代码呈现的结果如下图：
扩展资料
CSS图片旋转注意事项
1、图片的旋转可以说是一种效果，但是逐渐的，旋转已经不单单是属于视觉效果那个范畴，其更具有使用性，功能性。我们都知道，照片有时候是需要横过来的拍的，当我们预览或共享到web上时需要进行旋转。
2、这个操作在以往可能更多的是交给软件去完成，然后再将旋转到正常角度的图片发布到web上。但是，现在直接就可以在web上对图片进行旋转之类的处理，就算图片处理软件再怎么方便好用，也不及直接发布时对图片做调整来的方便。这就是图片旋转功能的实用意义。我们可以在新浪微博上见到这种图片旋转的功能。
<!DOCTYPE><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
<style>
body{
padding:0
margin:0
width:100%
height:100%
}
.demo{
width:100px
height:100px
background:#ff6600
margin:100px auto
transition:transform 0.5s, border-radius 1s, height 2.5s, width 2.5s
-moz-transition:-moz-transform 0.5s, border-radius 1s, height 2.5s, width 2.5s /* Firefox 4 */
-webkit-transition:-webkit-transform 0.5s,border-radius 1s, height 2.5s, width 2.5s/* Safari and Chrome */
-o-transition:-o-transform 0.5s, border-radius 1s, height 2.5s, width 2.5s/* Opera */
}
div.demo:hover{
width:200px
height:200px
border-radius:200px
-moz-border-radius:200px
-webkit-border-radius:200px
transform:rotate(90deg)
-webkit-transform: rotate(90deg)/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg)/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)/*ie*/
}
div.demo2
{
width:100px
height:100px
margin:200px auto
background:red
animation:myfirst 2s linear 2s infinite alternate
-moz-animation:myfirst 2s linear 2s infinite alternate/* Firefox */
-webkit-animation:myfirst 2s linear 2s infinite alternate/* Safari and Chrome */
-o-animation:myfirst 2s linear 2s infinite alternate/* Opera */
}
@keyframes myfirst
{
0% {background:red}
50% {
transform:rotate(90deg)
-webkit-transform: rotate(90deg)/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg)/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)/*ie*/}
75% {
border-radius:100px
-moz-border-radius:100px
-webkit-border-radius:100px}
100% {
width:200px
height:200px
border-radius:200px
-moz-border-radius:200px
-webkit-border-radius:200px}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red}
50% {
transform:rotate(90deg)
-webkit-transform: rotate(90deg)/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg)/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)/*ie*/}
75% {
border-radius:100px
-moz-border-radius:100px
-webkit-border-radius:100px}
100% {
width:200px
height:200px
border-radius:200px
-moz-border-radius:200px
-webkit-border-radius:200px}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red}
50% {
transform:rotate(90deg)
-webkit-transform: rotate(90deg)/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg)/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)/*ie*/}
75% {
border-radius:100px
-moz-border-radius:100px
-webkit-border-radius:100px}
100% {
width:200px
height:200px
border-radius:200px
-moz-border-radius:200px
-webkit-border-radius:200px}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red}
50% {
transform:rotate(90deg)
-webkit-transform: rotate(90deg)/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg)/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)/*ie*/}
75% {
border-radius:100px
-moz-border-radius:100px
-webkit-border-radius:100px}
100% {
width:200px
height:200px
border-radius:200px
-moz-border-radius:200px
-webkit-border-radius:200px}
}
</style>
</head>
<body>
<div class="demo"></div>
<div class="demo2"></div>
</body>
</html>
用了css3两种效果一种过渡demo 一种动画demo2
