前端总结100点-2-transform

我就是我 2023-02-14 13:04 72阅读 0赞

### transform ###

##### 学习资源 #####

https://www.runoob.com/cssref/css3-pr-transform.html  
https://c.runoob.com/codedemo/3391

##### 不自己敲敲，还是不靠谱 #####

// 语法
    transform:none|transform-funcitons;(none)

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>定义不进行转换</td> 
  </tr> 
  <tr> 
   <td>matrix(n,n,n,n,n,n)</td> 
   <td>定义2D转换，使用6个值的矩阵</td> 
  </tr> 
  <tr> 
   <td>matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)</td> 
   <td>定义3D转换，使用16个值的4*4矩阵</td> 
  </tr> 
  <tr> 
   <td>translate(x,y)</td> 
   <td>定义2D转换</td> 
  </tr> 
  <tr> 
   <td>translate3d(x,y,z)</td> 
   <td>定义3D转换</td> 
  </tr> 
  <tr> 
   <td>translateX(x)</td> 
   <td>定义X轴位移的值</td> 
  </tr> 
  <tr> 
   <td>translateY(y)</td> 
   <td>定义Y轴位移的值</td> 
  </tr> 
  <tr> 
   <td>translateZ(z)</td> 
   <td>3D转换，定义Z轴位移的值</td> 
  </tr> 
  <tr> 
   <td>scale(x[,y]?)</td> 
   <td>2D缩放</td> 
  </tr> 
  <tr> 
   <td>scale3d(x,y,z)</td> 
   <td>3D缩放</td> 
  </tr> 
  <tr> 
   <td>scaleX(x)</td> 
   <td>X轴缩放</td> 
  </tr> 
  <tr> 
   <td>scaleY(y)</td> 
   <td>Y轴缩放</td> 
  </tr> 
  <tr> 
   <td>scaleX(z)</td> 
   <td>Z轴缩放</td> 
  </tr> 
  <tr> 
   <td>rotate(angle)</td> 
   <td>2D旋转，度数</td> 
  </tr> 
  <tr> 
   <td>rotate3d(x,y,z,angle)</td> 
   <td>3D旋转</td> 
  </tr> 
  <tr> 
   <td>rotateX(angle)</td> 
   <td>X轴旋转</td> 
  </tr> 
  <tr> 
   <td>rotateY(angle)</td> 
   <td>Y轴旋转</td> 
  </tr> 
  <tr> 
   <td>rotateZ(angle)</td> 
   <td>Z轴旋转</td> 
  </tr> 
  <tr> 
   <td>skew(x-angle,y-angle)</td> 
   <td>X轴和Y轴倾斜</td> 
  </tr> 
  <tr> 
   <td>skewX(angle)</td> 
   <td>X轴倾斜</td> 
  </tr> 
  <tr> 
   <td>skewY(angle)</td> 
   <td>Y轴倾斜</td> 
  </tr> 
 </tbody> 
</table>

常用translate、scale、rotate

perspective(n) :3D转换，定义透视视图,设置在父元素上面  
transform-origin:x-axis y-axis z-axis;设置转换元素的位置。  
\* x-axis：left、center、right、length、%  
\* y-axis：top、center、bottom、length、%  
\* z-axis：length

// 86.6