标签：style blog http color io os 使用 java ar
由于最近一直在忙着筹划去上海工作的事情，所以博客更新的速度也就慢了下来。前几天面试了几家公司，也拿到几份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
拿出手机，打开支付宝扫一扫，再小的力量，也是一种支持：
标签：style blog http color io os 使用 java ar
原文地址：http://www.cnblogs.com/callmesummer/p/3967383.html
