标签:
基本原理:
img:nth-child(1) { transform: rotateY( 0deg ); }
img:nth-child(2) { transform: rotateY( 40deg ); }
img:nth-child(3) { transform: rotateY( 80deg ); }
img:nth-child(4) { transform: rotateY( 120deg ); }
img:nth-child(5) { transform: rotateY( 160deg ); }
img:nth-child(6) { transform: rotateY( 200deg ); }
img:nth-child(7) { transform: rotateY( 240deg ); }
img:nth-child(8) { transform: rotateY( 280deg ); }
img:nth-child(9) { transform: rotateY( 320deg ); }
由于共用一个中心点,所以我们可以看下如下图效果:
在3维空间中,想象一下:如果我们将每一张图片拉开到合适位置,是否就可以组成一个正九边形?
原本全部集中在中心点,拉开到六边形边上,其移动的距离及时图中的r的距离。
如何计算这个距离:
使用Math库中的tan正切函数。因为知道一条边及三个角的角度,所以:
r = 64/Math.tan(20/180 * Math.PI)
实例:
HTML:
1 <div class="d-rotate"> 2 <h3>3d旋转效果--点击任意图片浏览</h3> 3 <div id="stage" class="d_stage_area"> 4 <div id="container" class="container"> 5 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010122691-69559955.jpg" width="128" height="96" id="img1"/> 6 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010158301-1687814878.jpg" width="128" height="96" id="img2"/> 7 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010311832-1730833656.jpg" width="128" height="96" id="img3"/> 8 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010330816-951755840.jpg" width="128" height="96" id="img4"/> 9 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010350285-1813069804.jpg" width="128" height="96" id="img5"/> 10 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010410801-943411344.jpg" width="128" height="96" id="img6"/> 11 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010430395-1452487381.jpg" width="128" height="96" id="img7"/> 12 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010447332-2127426646.jpg" width="128" height="96" id="img8"/> 13 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010506613-1828415192.jpg" width="128" height="96" id="img8"/> 14 </div> 15 </div> 16 </div>
CSS:
1 body { 2 margin:100px; 3 background-color:hsla(50,50%,40%,0.8); 4 } 5 .d-rotate { 6 margin:10px; 7 } 8 .d-rotate h3 { 9 text-align: center; 10 font-size: 1em; 11 } 12 .d_stage_area { 13 position:relative; 14 top: 0; 15 width:800px; 16 min-height: 100px; 17 padding: 100px; 18 background:#333; 19 -webkit-perspective:800px; 20 -moz-perspective: 800px; 21 perspective: 800px; 22 -webkit-transition: top .5s; 23 } 24 .d-rotate .container { 25 position: absolute; 26 left: 50%; 27 top:50%; 28 width:128px; 29 height:100px; 30 -webkit-transition: -webkit-transform 1s; 31 -moz-transition: -moz-transform 1s; 32 transition: transform 1s; 33 34 -webkit-transform-style: preserve-3d; 35 -moz-transform-style: preserve-3d; 36 transform-style: preserve-3d; 37 } 38 .d-rotate .container img { 39 position: absolute; 40 bottom: 0; 41 width:128px; 42 box-shadow: 0 1px 3px rgba(0,0,0,.5); 43 -webkit-transition: opacity 1s, -webkit-transform 1s; 44 -moz-transition: opacity 1s, -moz-transform 1s; 45 transition: opacity 1s, transform 1s; 46 } 47 .d-rotate img:nth-child(1) { transform: rotateY( 0deg ); } 48 .d-rotate img:nth-child(2) { transform: rotateY( 40deg ); } 49 .d-rotate img:nth-child(3) { transform: rotateY( 80deg ); } 50 .d-rotate img:nth-child(4) { transform: rotateY( 120deg ); } 51 .d-rotate img:nth-child(5) { transform: rotateY( 160deg ); } 52 .d-rotate img:nth-child(6) { transform: rotateY( 200deg ); } 53 .d-rotate img:nth-child(7) { transform: rotateY( 240deg ); } 54 .d-rotate img:nth-child(8) { transform: rotateY( 280deg ); } 55 .d-rotate img:nth-child(9) { transform: rotateY( 320deg ); }
JS:
1 (function(){ 2 // css transform 变换 3 var transform = function(element, value, key) { 4 key = key || "Transform"; 5 ["Moz", "O", "Ms", "Webkit", ""].forEach(function(prefix) { 6 element.style[prefix + key] = value; 7 }); 8 return element; 9 }; 10 var $ = function(selector) { 11 return document.querySelector(selector); 12 }; 13 // 获取元素 14 var eleStage = $("#stage"), 15 container = $("#container"); 16 17 var indexPiece = 0, 18 htmlPic = ‘‘, 19 arrayPic = [1, 2, 3, 4, 5, 6, 7, 8, 9], 20 rotate = 360 / arrayPic.length; 21 22 arrayPic.forEach(function(i) { 23 htmlPic = htmlPic + ‘<img id="img‘+ i +‘" src="./‘+ i +‘.jpg"/>‘; 24 }); 25 container.innerHTML = htmlPic; 26 27 28 var transZ = 64 / Math.tan((rotate / 2 / 180) * Math.PI); 29 30 // 添加事件监听器 31 container.addEventListener("click", function() { 32 transform(this, "rotateY("+ (-1 * rotate * ++indexPiece) +"deg)"); 33 }); 34 35 arrayPic.forEach(function(i, j) { 36 transform($("#img" + i), "rotateY("+ j * rotate +"deg) translateZ("+ (transZ+15) +"px)"); 37 }); 38 39 })();
效果图:
标签:
原文地址:http://www.cnblogs.com/qbzmy/p/5826505.html