图片旋转效果怎么做?
想写这个页面 案例那个图片旋转效果, 能不能给说一下思路,或者 谁有做这种效果的视频推荐一下也好 谢谢谢谢~~~
NadiaSmile浏览 1504回答 3
3回答
-
stone310
做了一个旋转的例子，如果要学习，这个课程可以帮到你 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> -
如风糖
有代码 你还需要吗 -
qq_呆瓜_fkoIZ8
可以使用CSS3中3D效果的rotateY()方法来实现。建议先学习一下3D特效http://www.imooc.com/learn/77
随时随地看视频慕课网APP
Html/CSS
JavaScript
JQuery