CSS3 transform matrix矩阵与旋转实例页面

CSS代码：

.matrix_box {
    width: 150px;
    height: 150px;
    line-height: 130px;
    background-color: #a0b3d6;
    font-size: 60px;
    text-align:center;
    text-shadow:1px 1px #fff;
}
                

HTML代码：

<p id="matrixDetail">目前属性值为：matrix(1,0,0,1,0,0)</p>
<p>请输入角度(0~360)：<input type="text" id="matrixRotate" value="0" min="0" max="360" autocomplete="off" /></p>
<div id="matrixBox" class="matrix_box">↑</div>
                

JS代码：

(function() {
   var $ = function(selector) {
      return document.querySelector(selector);
   };
   var $css3Transform = function(element, value) {
      // 应用transform属性值，与之前demo雷同，略……
   };
   var eleDetail = $("#matrixDetail"),
      eleRotate = $("#matrixRotate"),
      eleBox = $("#matrixBox");
   
   if (eleDetail && eleRotate && eleBox) {
      eleRotate.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 cosVal = Math.cos(this.value * Math.PI / 180), sinVal = Math.sin(this.value * Math.PI / 180);
         var valTransform = 'matrix('+ cosVal.toFixed(6) +','+ sinVal.toFixed(6) +','+ (-1 * sinVal).toFixed(6) +','+ cosVal.toFixed(6) +',0,0)'
         eleDetail.innerHTML = '目前属性值为：' + valTransform;
         $css3Transform(eleBox, valTransform);
      });   
   }	
})();