JSFiddle - React, Tailwind, and code Playground

by jiang bourne

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="img9"/>
                </div>
            </div>
        </div>

CSS

.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:#f0f0f0;
                border:1px solid red;   
                -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;
            }

JavaScript

(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;

            
            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)");   
            });
            
        })();