css3 如何让一个图片不断翻转

/* css3 让一个图片不断翻转示例代码 */

#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>

1.css3的新增属性卖州 transform: rotateY(360deg)水平翻转360°，可以设置当鼠标移上去的时候进行水平翻慧咐转，或者使用@keyframes规则中碧蔽动画，一直翻转。

1、首先新建一个html空白文档，取名字叫做css3动画，保存一下。

2、然后写html结构，只纳蔽需要一个div元素即可，class名字叫做img

3、设置其边框为不同的颜色孝让，边框宽度设置成100px。

4、因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。

5、接下来就是关键的步骤了，也巧茄局就是添加动画效果。输入以下代码

6、来看一下最后的效果，还是不错的。

---