随手记录---transform 属性-白红宇

随手记录---transform 属性

阅读量：5092 次

发布时间：2019-06-13

本文共 3338 字，大约阅读时间需要 11 分钟。

　　其实平时很少用到transform属性，一些放大缩小用width、height可以改变，一些位置变换，更是有margin，而一些旋转、2D、3D变换也不怎么能用得到。不过最近接触了一些图片的缩放，觉得不错，我就进行了一下学习。transform的元素会根据方法进行位置大小等的变换，但是还占据着原本在文档流中的位置。

　　呃……比想象的麻烦，主要是做了个界面。transform是前端做3D的基础，想要做得好，还是得费点心思的，这里只记录一下基本的用法吧。使用transform的时候兼容的写法如下所示，下文就直接使用transform。

.rotate_left1    {
           -ms-transform:rotate(7deg); /* IE 9 */        -moz-transform:rotate(7deg); /* Firefox */        -webkit-transform:rotate(7deg); /* Safari and Chrome */        -o-transform:rotate(7deg); /* Opera */        transform:rotate(7deg);    }

1、matrix

　　matrix(n1,n2,n3,n4,n5,n6)和4*4矩阵matrix3d是变换图形的基本矩阵，学过图像处理的应该比较清楚，我懒得再仔细看了，毕竟这两个方法也不怎么常用到，使用后面的方法大概都可以解决大部分需求了，简单讲讲。

　　matrix(n1,n2,n3,n4,n5,n6)对应的是3*3矩阵（如下所示），只是其中的六个值，matrix的初始状态是matrix(1,0,0,1,0,0);

　　matrix3d()对应的4*4矩阵如下，它的初始状态是matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)

2、none

　　初始状态，不做任何变换，对应着矩阵的单位矩阵

3、translate方法

　　进行位置的偏移，包括translate(x,y),translate3d(x,y),translateX(x),translateY(y),translateZ(z)。初始状态三个参数x，y，z都为0px，其正数分别为向右，下，靠近人的方向移动，因为我用的图片是在2D平面上的，其中z的偏移我看不出明显的区别，配合其他方法（如rotate应该可以看出来）。

.mydiv{
       transform:translate(10px,-18px);}

.mydiv{
       transform:translate3d(10px,-18px,28px);    }

.mydiv{
       transform:translateX(10px);    }

.mydiv{
       transform:translateY(-18px);    }

.mydiv{
       transform:translateZ(28px);    }

4、scale

　　scale进行元素的缩放，包括scale(sx,sy), scale3d(sx,sy,sz), scaleX(sx), scaleY(sy), scaleZ(sz), 其中参数是原本长度的倍数，为1代表元素原本的大小。

.mydiv{
       transform:scale(0.5,1.5);    }

.mydiv{
       transform:scale3d(0.5,1.5,1.2);    }

.mydiv{
       transform:scaleX(0.5);    }

.mydiv{
       transform:scaleY(1.5);    }

.mydiv{
       transform:scaleZ(1.2);    }

5、rotate

　　围绕某个轴进行旋转，rotateX(x-angle)、rotateY(y-angle),rotateZ(z-angle)，分别是围绕x轴，y轴，z轴进行指定度数（deg）的旋转，正数是顺时针方向旋转负数是逆时针，rotate是围绕z轴的旋转，rotate3d(x,y,z,angle)提供自定义旋转轴的方法，（x,y,z）就是表示在x、y、z坐标轴中的某一条轴，我看到的说法是0~1内的矢量值，但是经实验，其他数值也可以。

.mydiv{
       transform:rotate(30deg);    }

.mydiv{
       transform:rotate3d(0.5,0.5,0.5,30deg);    }

.mydiv{
       transform:rotateX(30deg);}

.mydiv{
       transform:rotateY(30deg);}

.mydiv{
       transform:rotateZ(30deg);}

6、skew

　　skew进行倾斜，包括skew(x,y),skew(x),skew(y)，有沿x轴，y轴方向倾斜两种方式，单位是deg。

.mydiv{
       transform:skew(13deg,-12deg);    }

.mydiv{
       transform:skewX(13deg);    }

.mydiv{
       transform:skewY(-12deg);    }

7、perspective　　

　　perspective(30px)，这个说不太清楚，之前看到的解释也找不到网址了，大概它让元素在视觉上离你更近，配合其他变换才有效果。

　　补充：给父元素添加css--perspective:1000px;后，有关z的某些操作才会看得出来

总结：matrix和matrix3d包含了所有方法，但是没必要去做那么复杂的变换，需要了解具体变换的，文章中有介绍。需要实现3d效果，还是需要配合多种方法进行更加细致的调整，暂时不深入，还有就是可以配合动画和transition进行变换。

另附一个使用了vue.min.js,jquery和layui结合和所有变换方法的页面吧，所有时间都在弄这个上面了，比想象的复杂，相关的js、css用的是本地的，使用的是谷歌没怎么考虑兼容性的问题了

代码：


      
      
      
          
               
                
                    
                         
                      
         
            
         
          none            
         
        
        
        
                    
                         
                          
                              
            
              
 
           
                
          
                
                              
            {
    {transform}}

transform.html

界面：

参考：

转载于:https://www.cnblogs.com/liwxmyself/p/10312730.html

你可能感兴趣的文章