CSS3 实现3D旋转木马效果

基本原理：

• 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:

    <div class="d-rotate">
        <h3>3d旋转效果--点击任意图片浏览</h3>
        <div id="stage" class="d_stage_area">
            <div id="container" class="container">
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010122691-69559955.jpg" width="128" height="96" id="img1"/>
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010158301-1687814878.jpg" width="128" height="96" id="img2"/>
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010311832-1730833656.jpg" width="128" height="96" id="img3"/>
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010330816-951755840.jpg" width="128" height="96" id="img4"/>
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010350285-1813069804.jpg" width="128" height="96" id="img5"/>
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010410801-943411344.jpg" width="128" height="96" id="img6"/>
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010430395-1452487381.jpg" width="128" height="96" id="img7"/>
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010447332-2127426646.jpg" width="128" height="96" id="img8"/>
                <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160413010506613-1828415192.jpg" width="128" height="96" id="img8"/>
            </div>
        </div>
    </div>

 

 CSS:

body {
    margin:100px;
    background-color:hsla(50,50%,40%,0.8);
}
.d-rotate {
    margin:10px;
}
.d-rotate h3 {
    text-align: center;
    font-size: 1em;
}
.d_stage_area {
    position:relative;
    top: 0;
    width:800px;
    min-height: 100px;
    padding: 100px;
    background:#333;
    -webkit-perspective:800px;
    -moz-perspective: 800px;
    perspective: 800px;
    -webkit-transition: top .5s;
}
.d-rotate .container {
    position: absolute;
    left: 50%;
    top:50%;
    width:128px;
    height:100px;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    transition: transform 1s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.d-rotate .container img {
    position: absolute;
    bottom: 0;
    width:128px;
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    -moz-transition: opacity 1s, -moz-transform 1s;
    transition: opacity 1s, transform 1s;
}
.d-rotate img:nth-child(1) { transform: rotateY(   0deg ); }
.d-rotate img:nth-child(2) { transform: rotateY(  40deg ); }
.d-rotate img:nth-child(3) { transform: rotateY(  80deg ); }
.d-rotate img:nth-child(4) { transform: rotateY( 120deg ); }
.d-rotate img:nth-child(5) { transform: rotateY( 160deg ); }
.d-rotate img:nth-child(6) { transform: rotateY( 200deg ); }
.d-rotate img:nth-child(7) { transform: rotateY( 240deg ); }
.d-rotate img:nth-child(8) { transform: rotateY( 280deg ); }
.d-rotate img:nth-child(9) { transform: rotateY( 320deg ); }

 

JS:

(function(){
            // css transform 变换
            var transform = function(element, value, key) {
                key = key || "Transform";
                ["Moz", "O", "Ms", "Webkit", ""].forEach(function(prefix) {
                    element.style[prefix + key] = value;
                });
                return element;
            };
            var $ = function(selector) {
                return document.querySelector(selector);
            };
            // 获取元素
            var eleStage = $("#stage"),
                container = $("#container");

            var indexPiece = 0,
                htmlPic = '',
                arrayPic = [1, 2, 3, 4, 5, 6, 7, 8, 9],
                rotate = 360 / arrayPic.length;

            arrayPic.forEach(function(i) {
                htmlPic = htmlPic + '<img id="img'+ i +'" src="./'+ i +'.jpg"/>';
            });
            container.innerHTML = htmlPic;


            var transZ = 64 / Math.tan((rotate / 2 / 180) * Math.PI);

            //  添加事件监听器
            container.addEventListener("click", function() {
                transform(this, "rotateY("+ (-1 * rotate * ++indexPiece) +"deg)");
            });

            arrayPic.forEach(function(i, j) {
                transform($("#img" + i), "rotateY("+ j * rotate +"deg) translateZ("+ (transZ+15) +"px)");
            });

        })();

 

效果图：

 点击查看在线demo演示