<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
margin:0 auto;
width:540px;
height:405px;
background:url('img/cat2.jpg') center no-repeat;
/* 定义3D空间 */
-webkit-transform-style: preserve-3d;
/* 沿X轴旋转 20秒线性过过渡动画 无限次播放 */
-webkit-animation-name: x-spin;/*定义动画名称为x-spin*/
-webkit-animation-duration: 20s;/*定义动画时间为20s*/
-webkit-animation-iteration-count: infinite;/*定义动画过渡为线性转换*/
-webkit-animation-timing-function: linear;/*定义动画过渡为线性转换*/
}
/* 调用动画 */
@-webkit-keyframes x-spin{
/* 引用x-spin动画 */
0% {
/* 设置第一个关键帧为开始位置 */
-webkit-transform:rotateZ(0deg);
}
50%{
/* 沿X轴旋转180 */
-webkit-transform:rotateZ(180deg);
}
100%{
-webkit-transform:rotateZ(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
