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

效果:

目前属性值为:matrix(1,0,0,1,0,0)

请输入角度(0~360):

分享到:0