css3 TransformZ() 3D缩放

      transformZ()函数做了一个在Z轴移动的工作，3D空间中，Z轴垂直于x-y所在平面-也就是界面所在的平面，而我们的视角正好垂直于xy平面，所以进行transformZ() 3D缩放，其实在我们的视角中是一个在远离X-Y平面与接近X-Y平面的过程，当其值为0可以理解为就在x-y平面上；当其为正值的时候，其向指向界面外移动，当其值愈大，则移动得愈远，在我们的视角，就会呈现一个愈来愈大的元素；反之为负值，则会向界面内进行移动，其负值愈小，则离界面愈远，我们视角看上去它呈现的元素就愈来愈小。

      实例：

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

JS:

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

 

 查看实例demo演示效果：