css3 - 旋转的木马
参考资料：
张鑫旭 ： http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
Demo : Demo (建议移动端看,因为用了Zepto.js)
Demo截图：
Demo代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=640,user-scalable=no"/> <title>Document</title> <style> *{ margin:0;padding:0;} body,html{width:100%;height:100%; perspective:10000px;-webkit-perspective:10000px; background-color: #fff;-webkit-transition: top .5s;transition: top .5s;overflow:hidden;} .main{ width:100%;height:100%; margin-left:120px;transform-origin: center center; } .box{ position:relative;width:100%;height:100%;transform-style: preserve-3d;-webkit-transform-style: preserve-3d;transition: transform 1s;-webkit-transition: -webkit-transform 1s;transform-origin: 200px center; -webkit-transform-origin: 200px center; } .box .piece{position: absolute;left:0;top:20%;width:400px;height:50%;-webkit-transition: opacity 1s, transform 1s;transition: opacity 1s, transform 1s; border:5px solid #ccc; -webkit-box-sizing: border-box; background: rgba(0,0,0,.5);transform-origin: center center;-webkit-transform-origin: center center; } .box .piece:nth-child(1){ background-color: red;} .box .piece:nth-child(2){ background-color: blue;} .box .piece:nth-child(3){ background-color: yellow;} .box .piece:nth-child(4){ background-color: pink;} .box .piece:nth-child(5){ background-color: purple;} .box .piece:nth-child(6){ background-color: black;} .box .piece:nth-child(7){ background-color: white;} .box .piece:nth-child(8){ background-color: gray;} .box .piece:nth-child(9){ background-color: orange;} .box .piece:nth-child(10){ background-color: violet;} </style> <script src="zepto.min.js"></script> <script> $(function(){ var $oBox = $('#box'), $aPieces = $oBox.find('.piece'), winWidth = $(window).width(), transform = (function(){ var arr = [ 'transform','webkitTransform','mozTransform','oTransform','msTransform' ]; var oDiv = document.createElement('div'); for( var i=0,len=arr.length;i<len;i++ ){ if( oDiv.style[ arr[i] ] != undefined ){ return arr[i]; } } })(); for( var i=0,len=$aPieces.length;i<len;i++ ){ var deg = 360/len*i; var imgWidth = $aPieces.eq(i).width()/2; var piecesWidth = $aPieces.eq(0).width(); var z = imgWidth/Math.tan(360/len/ 180 * Math.PI) + piecesWidth ; $aPieces[i].style[ transform ] = " rotateY("+ deg +"deg) translateZ("+ z +"px)"; } var num = 0; var oBox = document.querySelector('#box'); $(document).swipeLeft(function(){ num++; var left = -(360 / $aPieces.length)*num; oBox.style[ transform ] = 'rotateY('+left+'deg)'; return false; }); $(document).swipeRight(function(){ num--; var left = -(360 / $aPieces.length)*num; oBox.style[ transform ] = 'rotateY('+left+'deg)'; return false; }); }) </script> </head> <body> <div class="main" > <div class="box" id="box" > <div class="piece" >1</div> <div class="piece" >2</div> <div class="piece" >3</div> <div class="piece" >4</div> <div class="piece" >5</div> <div class="piece" >6</div> <div class="piece" >7</div> <div class="piece" >8</div> <div class="piece" >9</div> <div class="piece" >10</div> </div> </div> </body> </html>
后记:
其实看完这个 张鑫旭 的文章就应该会做了，因为我这的当时是最近看了支付宝芝麻信用里的信用猜猜那个想做的这个demo 最开始以为是围着一个点转圈做的后来想到 张鑫旭 文章跟着做了这个
主要还是根据Math.tan求这个z轴的距离然后就是perspective景深的设置,像 向左滑动，向右滑动偷懒用了 Zepto.js 的 swipeLeft、swipeRight 事件，其实想根据这个有多少面去算这个 两个 面的间隔但是后来发现没什么规律所以放弃了，当然如果有好的建议谢谢告知。
