CSS3 transform matrix矩阵30*30偏移实例页面

回到相关文章 »

代码：

CSS代码：
.matrix_box { width:150px; height:150px; background-color:#a0b3d6; }
HTML代码：
<div id="matrixBox1" class="matrix_box"></div>
<p><button id="matrixButton1" type="button">点击应用matrix(1,0,0,1,30,30)</button></p>
<div id="matrixBox2" class="matrix_box"></div>
<p><button id="matrixButton2" type="button">点击应用translate(30,30)</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;
        }
    };

    if ($ && window.addEventListener) {
        $("#matrixButton1").addEventListener("click", function() {
            $css3Transform($("#matrixBox1"), "matrix(1,0,0,1,30,30)");
        });
        $("#matrixButton2").addEventListener("click", function() {
            $css3Transform($("#matrixBox2"), "translate(30px,30px)");
        });
    } else {
        alert("目前浏览器不支持CSS3 transform, 请试试其他浏览器");
    }
})();

效果：