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

CSS代码：

.matrix_box {
    width: 150px;
    height: 150px;
    background-color: #a0b3d6;
    -moz-transform-origin: top left;
    -webkit-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
}
                

HTML代码：

<p id="matrixDetail">目前属性值为：matrix(1,0,0,1,0,0)</p>
<p>x轴比例(1-3)：<input type="range" id="matrixRangeX" value="1" min="1" max="3" step="0.1" autocomplete="off" /></p>
<p>y轴比例(1-3)：<input type="range" id="matrixRangeY" value="1" min="1" max="3" step="0.1" autocomplete="off" /></p>
<div id="matrixBox" class="matrix_box"></div>
                

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 eleRangeX = $("#matrixRangeX"), eleRangeY = $("#matrixRangeY"),
        eleDetail = $("#matrixDetail"), eleBox = $("#matrixBox");
    
    if (eleDetail && eleRangeX && eleRangeY && eleBox) {
        var arrRange = [eleRangeX, eleRangeY];
        for (var start=0; start<2; start+=1) {
            arrRange[start].addEventListener("change", function() {
                var maxVal = this.getAttribute("max"), minVal = this.getAttribute("min"), value = this.value;
                if (value < minVal) {
                    value = minVal;
                    this.value = minVal;
                }
                if (value > maxVal) {
                    value = maxVal;
                    this.value = maxVal;
                }
                var valTransform = 'matrix('+ eleRangeX.value +',0,0,'+ eleRangeY.value +',0,0)'
                eleDetail.innerHTML = '目前属性值为：' + valTransform;
                $css3Transform(eleBox, valTransform);
            });    
        }     
    }	
})();