CSS3-2d转换 - 芒果文档

📌 相关文章

📜 CSS3-2d转换

📅 最后修改于: 2020-10-26 04:59:11 🧑 作者: Mango

2D变换用于在平移，旋转，缩放和倾斜时重新更改元素结构。

下表包含了用于2D转换的常用值-

Sr.No.	Value & Description
1	matrix(n,n,n,n,n,n) Used to defines matrix transforms with six values
2	translate(x,y) Used to transforms the element along with x-axis and y-axis
3	translateX(n) Used to transforms the element along with x-axis
4	translateY(n) Used to transforms the element along with y-axis
5	scale(x,y) Used to change the width and height of element
6	scaleX(n) Used to change the width of element
7	scaleY(n) Used to change the height of element
8	rotate(angle) Used to rotate the element based on an angle
9	skewX(angle) Used to defines skew transforms along with x axis
10	skewY(angle) Used to defines skew transforms along with y axis

以下示例显示了所有上述属性的示例。

旋转20度

箱体以20度角旋转，如下所示-


   

   
      
         Tutorials point.com.
      
      
      
         Tutorials point.com

它将产生以下结果-

旋转-20度

箱体以-20度角旋转，如下所示-


   

   
      
         Tutorials point.com.
      
      
      
         Tutorials point.com

它将产生以下结果-

X轴偏斜

x轴偏斜的盒子旋转，如下所示-


   

   
      
         Tutorials point.com.
      
      
      
         Tutorials point.com

它将产生以下结果-

偏Y轴

框的y轴倾斜，如下所示-


   

   
      
         Tutorials point.com.
      
      
      
         Tutorials point.com

它将产生以下结果-

矩阵变换

带有Matrix变换的框旋转如下所示-


   

   
      
         Tutorials point.com.
      
      
      
         Tutorials point.com

它将产生以下结果-

矩阵以另一个方向变换。


   

   
      
         Tutorials point.com.
      
      
      
         Tutorials point.com

它将产生以下结果-