#gavinPlay{
/* background:color url x y repeat 图片来自百度图片，按需要更换 */
background:red url("https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2406548182,3889596045&fm=80") center no-repeat
/* background-size:auto auto || cover 代表以宽或高填满元素背景 */
background-size:cover
/* 随便设置宽高值，测试 */
width:200px
height:200px
/* 设置默认样式，开启3d硬件加速 */
-webkit-transform:translate3d(0,0,0)
-moz-transform:translate3d(0,0,0)
transform:translate3d(0,0,0)
/* 设置动画，animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放 */
-webkit-animation:play 3s linear infinite
-moz-animation:play 3s linear infinite
animation:play 3s linear infinite
}
@-webkit-keyframes play{
0% {
/*
水平翻转
*/
-webkit-transform:rotateY(0deg)
/*
垂直翻转
-webkit-transform:rotateX(0deg)
顺时针旋转
-webkit-transform:rotate(0deg)
逆时针旋转
-webkit-transform:rotate(0deg)
*/
}
100% {
/* 水平翻转 */
-webkit-transform:rotateY(360deg)
/* 垂直翻转
-webkit-transform:rotateX(360deg)
顺时针旋转
-webkit-transform:rotate(360deg)
逆时针旋转
-webkit-transform:rotate(-360deg)
*/
}
}
@-moz-keyframes play{
0% {
-moz-transform:rotateY(0deg)
/*
-moz-transform:rotateX(0deg)
-moz-transform:rotate(0deg)
-moz-transform:rotate(0deg)
*/
}
100% {
-moz-transform:rotateY(360deg)
/*
-moz-transform:rotateX(360deg)
-moz-transform:rotate(360deg)
-moz-transform:rotate(-360deg)
*/
}
}
@keyframes play{
0% {
transform:rotateY(0deg)
/*
transform:rotateX(0deg)
transform:rotate(0deg)
transform:rotate(0deg)
*/
}
100% {
transform:rotateY(360deg)
/*
transform:rotateX(360deg)
transform:rotate(360deg)
transform:rotate(-360deg)
*/
}
} <!-- html 布局代码 -->
<div id="gavinPlay"></div>
css3中的transform中有旋转，放缩，倾斜，平移的功能，分别对应的属性是：rotate，scale，skew，translate旋转：（rotate）
[css] view plain copy
-webkit-transform:rotate(10deg)
-moz-transform:rotate(10deg)
transform:rotate(10deg)
翻转：（scale）
(这个属性是放缩的功能，怎么能翻转的！原来括弧里面（1，1）前者表示X轴，后者表示Y轴，当数字大于1时放大，大于0并小于1时缩小，负数代表翻转)
水平翻转：
[css] view plain copy
-webkit-transform:scale(-1，1)
-moz-transform:scale(-1，1)
transform:scale(-1，1)
垂直翻转：
[css] view plain copy
-webkit-transform:scale(1，-1)
-moz-transform:scale(1，-1)
transform:scale(1，-1)
代码如下：
<!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上对图片进行旋转之类的处理，就算图片处理软件再怎么方便好用，也不及直接发布时对图片做调整来的方便。这就是图片旋转功能的实用意义。我们可以在新浪微博上见到这种图片旋转的功能。
