/*?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>