Html5+css3实现3D转动效果
由于最近一直在忙着筹划去上海工作的事情,所以博客更新的速度也就慢了下来。前几天面试了几家公司,也拿到几份offer,总结了一些面试中遇到的问题,最近整理一下会和大家一起分享。今天呢,就和大家分享一下前几天写的一个3d选转的效果。代码写的只是一个简要的demo,仅供学习使用。如果想用在项目中,还需要进一步的优化。另外,打个小广告,我和朋友一起经营的天猫商城终于开业了,是卖一些家用路由器和鼠标键盘的,有需要的朋友请猛点链接 宏正数码。好了,下面附上3d效果代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>测试</title> <meta name="viewport" content="target-densitydpi=device-dpi,user-scalable=no" /> <style type="text/css"> *{box-sizing: border-box;} .float{ float: left;} .bg-red{ background-color: red;} .bg-green{ background-color: green;} .bg-purple{ background-color: purple;} .bg-blue{ background-color: blue;} .higAndWid{ width: 400px; height: 200px;} .halfHAW{ width: 200px; height: 100px;} .stage {margin: 0 auto;position: relative;-webkit-perspective: 600px;} .container {position: absolute;-webkit-transform: translateZ(-200px);-webkit-transform-style: preserve-3d;-webkit-transition:all 0.5s ease-in-out 0s;height: 100%;width: 100%;} .side {border: 2px solid #8ec63f;height: 100%;position: absolute;width: 100%;-webkit-transition:all 0.5s ease-in-out 0s;} .front {-webkit-transform: translateZ(200px);} .right {-webkit-transform: rotateY(90deg) translateZ(200px);} .back{-webkit-transform: translateZ(-200px) rotateY(180deg);} .left{-webkit-transform: rotateY(-90deg) translateZ(200px);} .pageTwo{ -webkit-transform:rotateY(-90deg) translate3d(-200px,0px,0px);} .pageThree{ -webkit-transform:rotateY(-180deg) translate3d(0px,0px,200px);} .pageFour{-webkit-transform:rotateY(-270deg) translate3d(200px,0px,0px);} .list{ width: 400px; margin: 0 auto;} .list:after{ display: table; content: ""; clear: both;} .list .container{ -webkit-transform: translateZ(-100px);} .list .left {-webkit-transform: rotateY(-90deg) translateZ(100px);} .list .right{-webkit-transform: rotateY(90deg) translateZ(100px);} .list .front{ -webkit-transform: translateZ(100px);} .list .back{-webkit-transform: translateZ(-100px) rotateY(180deg);} .list .pageTwo{ -webkit-transform:rotateY(-90deg) translate3d(-100px,0px,0px);} .list .pageThree{ -webkit-transform:rotateY(-180deg) translate3d(0px,0px,100px);} .list .pageFour{-webkit-transform:rotateY(-270deg) translate3d(100px,0px,0px);} h4{ margin: 0; padding: 0;} li{font-size: 60px;} </style> </head> <body> <div class="stage higAndWid"> <div class="container" id="ctrl"> <div class="side front bg-red">1</div> <div class="side right bg-green">2</div> <div class="side back bg-purple">3</div> <div class="side left bg-blue">4</div> </div> </div> <div class="list"> <div class="stage halfHAW float"> <div class="container"> <div class="side front bg-green"></div> <div class="side right bg-red"></div> <div class="side back bg-blue"></div> <div class="side left bg-purple"></div> </div> </div> <div class="stage halfHAW float"> <div class="container"> <div class="side front bg-purple"></div> <div class="side right bg-green"></div> <div class="side back bg-red"></div> <div class="side left bg-blue"></div> </div> </div> <div class="stage halfHAW float"> <div class="container"> <div class="side front bg-blue"></div> <div class="side right bg-green"></div> <div class="side back bg-purple"></div> <div class="side left bg-red"></div> </div> </div> <div class="stage halfHAW float"> <div class="container"> <div class="side front bg-purple"></div> <div class="side right bg-red"></div> <div class="side back bg-blue"></div> <div class="side left bg-green"></div> </div> </div> <div class="stage halfHAW float"> <div class="container"> <div class="side front bg-blue"></div> <div class="side right bg-purple"></div> <div class="side back bg-green"></div> <div class="side left bg-red"></div> </div> </div> <div class="stage halfHAW float"> <div class="container"> <div class="side front bg-red"></div> <div class="side right bg-blue"></div> <div class="side back bg-green"></div> <div class="side left bg-purple"></div> </div> </div> </div> <script type="text/javascript" src="js/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/hammer.js"></script> <script> var ctrl = $("#ctrl"), cont = $(".list .container"), hammer = new Hammer(ctrl[0]), statue = 0; //左滑 hammer.on("swipeleft", function(event) { switch(statue){ case 0: ctrl.addClass("pageTwo"); cont.addClass("pageTwo"); statue += 1; break; case 1: ctrl.addClass("pageThree"); cont.addClass("pageThree"); statue += 1; break; default: ctrl.addClass("pageFour"); cont.addClass("pageFour"); break; } }); //右滑 hammer.on("swiperight", function(event) { switch(statue){ case 2: ctrl.removeClass("pageFour"); cont.removeClass("pageFour"); statue -= 1; break; case 1: ctrl.removeClass("pageThree"); cont.removeClass("pageThree"); statue -= 1; break; default: ctrl.removeClass("pageTwo"); cont.removeClass("pageTwo"); break; } }); </script> </body> </html>
注意:上面代码中使用了jQuery和hammer.js使用的时候请单独引入,hammer.js是处理移动端触摸的,所以在测试时,请使用支持touch事件的浏览器,推荐使用chrome,并调整到相应的模式。具体调整方法,在此不再赘述。
由于作者水平有限,如果大家有更好的实现方法,欢迎大家和我讨论!
有需要购置家用路由器和键盘鼠标的童鞋,不要忘记猛点宏正数码哦,在此欢迎!
转载请标明出处:http://www.cnblogs.com/callmesummer/p/3967383.html
拿出手机,打开支付宝扫一扫,再小的力量,也是一种支持:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。