首页 > 代码库 > CSS3 实现3D旋转木马效果

CSS3 实现3D旋转木马效果

2024-08-11 11:55:40   220人阅读

基本原理：

  • 1.首先我们需要让图片能旋转的效果，我们让所有图片绝对定位(position:absolute),共用一个中心点。
  • 2.对于舞台我们加一个视距，比如下面的demo是 perspective: 800px;
  • 3.对于容器 我们可以加一个3D视图 transform-style: preserve-3d;
  • 4. 对于图片旋转，我们要使用在旋转 rotateY,但是一圈是360度，而图片共九张，因此每一张的图片旋转的角度是40度；
  • 因此我们可以在css下这样写代码：

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>
View Code

 

 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 ); }
View Code

 

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="http://www.mamicode.com/‘+ 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         })();
View Code

 

效果图：

技术分享


联系
我们