<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<style>
*{margin:0;
padding:0;}
. wrapper1{
width:150px;
height:191px;
border: #eee 1px solid;
border-radius:10px;
padding:2px;
Float:left;
margin:200px 0 0 50px;
-moz-perspective:800px;
-moz-transform-style:preserve-3d;
-webkit-perspective:800px;
-webkit-transform-style:preserve-3d;
-moz-backface-visibility:;
-webkit-backface-visibility:hidden;
}
. box1{
width:150px;
height:191px;
Background:url (http://p1.qhimg.com/t0151320b1d0fc50be8.png);
border-radius:10px;
-webkit-animation-name:wobble;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:;
-moz-animation-name:wobble;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:0;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:;
}
@-webkit-keyframes wobble{
0% {
-webkit-transform:rotatey (0deg) Rotatex (0deg) Rotatez (0deg) Translatez (0px);
}
25% {
-webkit-transform:rotatey (90deg) Rotatex (0deg) Rotatez (0deg) Translatez (0px);
}
50% {
-webkit-transform:rotatey (180deg) Rotatex (0deg) Rotatez (0deg) Translatez (0px);
}
75% {
-webkit-transform:rotatey (90deg) Rotatex (0deg) Rotatez (0deg) Translatez (0px);
}
100% {
-webkit-transform:rotatey (0deg) Rotatex (0deg) Rotatez (0deg) Translatez (0px);
}
}
@-moz-keyframes wobble{
0% {
-moz-transform:rotatey (0deg) Rotatex (0deg) Rotatez (0deg) Translatez (0px);
}
25% {
-moz-transform:rotatey (90deg) Rotatex (0deg) Rotatez (0deg) Translatez (0px);
}
50% {
-moz-transform:rotatey (180deg) Rotatex (0deg) Rotatez (0deg) Translatez (0px);
}
75% {
-moz-transform:rotatey (90deg) Rotatex (0deg) Rotatez (0deg) Translatez (0px);
}
100% {
-moz-transform:rotatey (0eg) Rotatex (0deg) Rotatez (0deg) Translatez (0px);
}
}
</style>
<body>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
<div class= "Wrapper1" >
<div class= "Box1" ></div>
</div>
</body>
CSS3 3D Rotation Animation code example