CSS3 transform matrix矩阵与3D缩放实例页面

CSS代码：

.matrix_box {
    width: 150px;
    height: 150px;
    background-color: #a0b3d6;
    box-shadow:2px 2px 4px rgba(0,0,0,.6);
}
                

HTML代码：

<p id="matrixDetail">目前属性值为：matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)</p>
<div id="matrixBox" class="matrix_box"></div>
<p><button id="matrixBtn">随机比例变换</button></p>
                

JS代码：

(function() {
    var $ = function(selector) {
        return document.querySelector(selector);
    };
    var $css3Transform = function(element, value) {
        var arrPriex = ["O", "Ms", "Moz", "Webkit", ""], length = arrPriex.length;
        for (var i=0; i < length; i+=1) {
            element.style[arrPriex[i] + "Transform"] = value;
        }
    };
    var eleDetail = $("#matrixDetail"),
        eleBtn = $("#matrixBtn"),
        eleBox = $("#matrixBox");
    
    if (eleDetail && eleBtn && eleBox) {
        eleBtn.addEventListener("click", function() {
            var scaleX = Math.random(), scaleY = Math.random(), scaleZ = Math.random();
            var valTransform = 'matrix3d('+ scaleX.toFixed(6) +', 0, 0, 0, 0, '+ scaleY.toFixed(6) +', 0, 0, 0, 0, '+ scaleZ.toFixed(6) +', 0, 0, 0, 0, 1)';
            eleDetail.innerHTML = '目前属性值为：' + valTransform;
            $css3Transform(eleBox, valTransform);
        });    
    }    
})();