图片旋转效果怎么做?

做了一个旋转的例子，如果要学习，这个课程可以帮到你 http://www.imooc.com/learn/77<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .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; } </style> <script> window.onload=function(){ var pic=document.getElementsByClassName("pic")[0] setTimeout(function(){ pic.className=pic.className+" pic-on" },1000) } </script> </head> <body> <div class="pic"> <div id="face1">正面</div> <div id="face2">反面</div> </div> </body> </html>

图片旋转效果怎么做?

3回答