首页 > 代码库 > Html5+css3实现3D转动效果
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
拿出手机，打开支付宝扫一扫，再小的力量，也是一种支持：
Html5+css3实现3D转动效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。