做了个小demo,翻转的html>
.pic {
width: 200px;
height: 200px;
-webkit-perspective: 800;
-moz-perspective: 800;
perspective: 800;
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: all 1s;
}
#face1, #face2 {
width: 200px;
height: 200px;
position: absolute;
}
#face1 {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
background:blue;
}
#face2 {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
background: red;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.pic-on {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
transition: all 1s;
}
window.οnlοad=function(){
var pic=document.getElementsByClassName("pic")[0]
setTimeout(function(){
pic.className=pic.className+" pic-on"
},1000)
}