JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<div class="demo">
    <h4 class="title">舞台视角大小201像素，子元素translateZ值为: <span id="translateZ" class="translateZ">0</span>px;</h4>
    <p class="range_area">-100 
        <input type="range" id="range" min="-100" max="300" step="5" value="0" autocomplete="off" /> 300
    </p>
    <div id="stage" class="container">
        <div class="piece"></div>
    </div>
</div>

CSS

.demo {width:500px;margin:10px;border:1px solid red;}
.demo .title {text-align: center;font-size: 1em;}
.translateZ {color:red;}
.range_area {text-align: center;}
.range_area input {position:relative;width:300px;z-index:100;}
.demo .container {
    width:400px;
    height:100px;
    padding:50px;
    background:#f0f0f0;
    box-shadow: inset 0 0 3px rgba(0,0,0,.35);
    -webkit-transition: top .5s;
    -moz-perspective: 201px;
    -webkit-perspective: 201px;
    perspective: 201px;
    position: relative;
    z-index: 2;
    top: 0;
}
.piece {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color:red;
    padding: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

JavaScript

(function(){
    var randomColor = function(){
        return "hsla("+Math.round(360 * Math.random())+","+"60%,50%,.75)";
    };
    // 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"),
        range = $("#range"),
        piece = $(".piece"),
        translateZ = $("#translateZ");

    // 添加时间监听器
    range.addEventListener("change",function(){

        transform(piece,"translateZ("+this.value+"px)");
        translateZ.innerHTML = this.value;
    });
    console.log(range.value);
    transform(piece,"translateZ("+range.value+"px)");

    piece.style.backgroundColor = randomColor();
})();