CSS-2D转换

从实际应用开始讲，2D转换常用的有以下5个函数，稍后挨个讲解

1.平移translate()

2.缩放scale()

3.旋转rotate()

4.倾斜skew()

5.矩阵变换matrix()

1.平移translate(x,y)

• 可设置两个值，x为水平方向向右移动距离，y为垂直方向向下移动距离。
• translateX()  translateY()，可单独设置一个方向上的位移

1）创建三个盒子

2）给box2设置translate

  

3)给box3设置translate

可以看出，这个translate是在父元素的基础上进行平移,而且是带着子元素跑。

4）给box3设置较大的位移

可以看出，当位移超过父元素的范围时，就会移到父元素外。

   

2.缩放scale(x,y)

• x表示水平方向的缩放，y表示垂直方向的缩放。
• 如果只有一个值，则表示，x、y都为这个值
• 0-1缩小，1保持不变，大于1放大，-1轴对称

1）两个盒子

   

2）横缩竖张

可以看出，采用定位的子盒子会在原位置进行缩放。但采用2D位移的子盒子则会在位移前的位置进行缩放。主要原因是缩放点的问题。

  

 

3)改变变换基点

transform-origin: 25px 25px; 设置变换基点

以变换基点为坐标原点，横向为x轴，向右为正，纵轴为y轴，向下为正。当设置基点后，以基点为圆心进行缩放。

  

4）-1对称

如果是scale(-1, 1)，则转换后元素的位置与元素经scale(1, 1)变换后的位置关于局部坐标系的 y 轴的对称。

如果是scale(1, -1)，则转换后元素的位置与元素经scale(1, 1)变换后的位置关于局部坐标系的 x 轴的对称。

如果是scale(-1, -1)，则转换后元素的位置与元素经scale(1, 1)变换后的位置关于变换基点中心对称。

3.旋转rotate(angle)

• angle为角度值，如果为正，元素顺时针旋转；如果为负，元素逆时针旋转
• 绕着变换基点旋转，默认为中心点。

1）建立盒子

2）旋转

  

3）改变基点旋转

  

4.倾斜skew(x,y)

• x,y为两个值，分别表示垂直边和水平边旋转的角度。
• 如果只设置某一个边的角度可以直接设置skewX或者skewY。

创建3个盒子，第三个盒子和第二个盒子一样大，然后位置相同，所以第三个盒子将第二个盒子完全挡住。

在这里，我将第三个盒子的颜色设置采用了rgba的形式设置的，为的是后期给它一个透明度，方便观看。

1）三个盒子的原始状态，此时box3的透明度为1，就是不透明

  

2）看看box3半透明效果

此时由于蓝色处于半透明状态，与下面的box2黄色混合，就显现成绿色。

   

3）设置第一个倾斜值为30deg

第一个值为设置垂直边的倾斜角度。这个角度，以六点方向为准，为正则逆时针旋转，为负则顺时针旋转。然后，那个垂直边与旋转后的指针平行。

  

4）设置第二个倾斜值30deg

第二个值为设置水平边的倾斜角度。这个角度，以九点方向为准，为正则逆时针旋转，为负则顺时针旋转。然后，那个水平边与旋转后的指针平行。

  

5.矩阵变换matrix(a,b,c,d,e,f)

利用矩阵实现2D变换。其实，只要运用得当，可以用matrix实现上面的4个功能。下面简单介绍平移和缩放功能。

先讲下矩阵变换的原理，如下图矩阵。其中左边矩阵的a-f就是matrix里的6个值，第二个矩阵中的x、y则为原图形中各点的坐标。也就是说，原图型坐标点左边乘以matrix矩阵后，所得的便是新图形的坐标。

1）matrix实现平移效果

• 将a=1,b=0,c=0,d=1。则剩下的e和f就是对元素平移的设置。x为水平位移距离，y为垂直位移距离。

  

    

2）matrix实现缩放效果

• 将 b = 0，c = 0，e = 0，f = 0。则剩下的a和d就是对元素缩放的设置。a为水平位缩放比，d为垂直位缩放比。

  

再从理论方面讲下，transform整体有以下属性

1.元素发生变化，则其子元素也会跟着变化。就好比父盒子缩放，子盒子跟着缩放。

2.当元素应用变换后，不会影响其周围的元素。

   

给黄盒子平移后

   

3.如果将溢出的父元素设置overflow时，则会产生滚动条以现实。