<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
background: url(images/ggx/bg.png) no-repeat;
padding: 0;
margin: 0;
width: 1345px;
height: 28363px;
}
#apDiv1 {
position: absolute;
width: 810px;
height: 301px;
z-index: 1;
left: 339px;
top: 174px;
}
#box {
background-image: url(images/ggx/shoe.png);
background-repeat: no-repeat;
background-position: bottom center;
width: 422px;
height: 300px;
margin: auto;
-webkit-transform-style: preserve-3d;
-webkit-animation-name: y-spin;
-webkit-animation-duration: 60s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
transform-style: preserve-3d;
animation-name: y-spin;
animation-duration: 60s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
/* 调用动画 */
@-webkit-keyframes y-spin {
0% {
-webkit-transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(360deg);
}
}
@keyframes y-spin {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
</style>
<title></title>
</head>
<body>
<div id="apDiv1">
<div id="box"></div>
</div>
</body>
</html>
rotateX就是围绕着X轴旋转；rotateY就是围绕着Y轴旋转；
rotateZ就是围绕着Z轴旋转；
屏幕快照 2017-11-25 上午11.53.35.png
屏幕快照 2017-11-25 上午11.53.45.png
屏幕快照 2017-11-25 上午11.53.52.png
屏幕快照 2017-11-25 上午11.53.56.png
网友评论