CSS3 3D Rotation animation code example and css33d rotation example
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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>
</Head>
<Body>
<Div> <A href = "http://www.999jiujiu.com/"> http://www.999jiujiu.com/</A> </div>
<Div class = "wrapper1">
<Div class = "box1"> </div>
</Div>
</Body>
</Html>
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.