<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* css3 讓一個圖片不斷翻轉示例代碼 */
#gavinPlay{
/* background:color url x y repeat 圖片來自百度圖片，按需要更換 */
background:red url("https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2406548182,3889596045&fm=80") center/cover 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;
}
#gavinPlay:hover{
animation-iteration-count:0;
}
@-webkit-keyframes play{
0% {
/*
水平翻轉
*/
-webkit-transform:rotateY(0deg);
/*
垂直翻轉
-webkit-transform:rotateX(0deg);
順時針旋轉
-webkit-transform:rotate(0deg);
逆時針旋轉
-webkit-transform:rotate(0deg);
*/
}
100% {
/* 水平翻轉 */
-webkit-transform:rotateY(180deg);
/* 垂直翻轉
-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(180deg);
/*
-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(180deg);
/*
transform:rotateX(360deg);
transform:rotate(360deg);
transform:rotate(-360deg);
*/
}
}
</style>
</head>
<body>
<div id="gavinPlay"></div>
</body>
</html>transform:translate3d(0,0,0)可以觸發硬件加速
講解網址：
http://www.bkjia.com/webzh/967556.html
blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html