翻牌抽奖的用旋转和HTML5,微信页面，翻牌抽奖的效果

做了个小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)

}

正面

反面