CSS3 - 2d 变换

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

下表包含了 2D 变换中使用的常见值 -

先生。 价值与描述
1

矩阵（n，n，n，n，n，n）

用于定义具有六个值的矩阵变换
2

平移（x，y）

用于沿 x 轴和 y 轴变换元素
3

翻译X(n)

用于沿 x 轴变换元素
4

翻译Y(n)

用于沿 y 轴变换元素
5

比例（x，y）

用于改变元素的宽度和高度
6

尺度X(n)

用于改变元素的宽度
7

尺度Y(n)

用于改变元素的高度
8

旋转（角度）

用于根据角度旋转元素
9

倾斜X(角度)

用于定义沿 x 轴的倾斜变换
10

偏斜Y（角度）

用于定义沿 y 轴的倾斜变换

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

旋转20度

盒子旋转 20 度角，如下所示 -

现场演示 
<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(20deg);
            
            /* Safari */
            -webkit-transform: rotate(20deg);
            
            /* Standard syntax */
            transform: rotate(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv">
         Tutorials point.com
      </div>
   </body>
</html>

它将产生以下结果 -

旋转-20度

盒子旋转 -20 度角，如下所示 -

现场演示 
<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(-20deg); 
         
            /* Safari */
            -webkit-transform: rotate(-20deg);
         
            /* Standard syntax */	
            transform: rotate(-20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv">
         Tutorials point.com
      </div>
   </body>
</html>

它将产生以下结果 -

X 轴倾斜

框旋转与倾斜 x 轴如下所示 -

现场演示 
<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewX(20deg); 
            
            /* Safari */
            -webkit-transform: skewX(20deg);
            
            /* Standard syntax */	
            transform: skewX(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "skewDiv">
         Tutorials point.com
      </div>
   </body>
</html>

它将产生以下结果 -

倾斜 Y 轴

盒子旋转与倾斜 y 轴如下所示 -

现场演示 
<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewY(20deg); 
            
            /* Safari */
            -webkit-transform: skewY(20deg); 
            
            /* Standard syntax */	
            transform: skewY(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "skewDiv">
         Tutorials point.com
      </div>
   </body>
</html>

它将产生以下结果 -

矩阵变换

使用矩阵变换进行框旋转，如下所示 -

现场演示 
<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv1 {
            /* IE 9 */
            -ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
            
            /* Safari */
            -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); 
            
            /* Standard syntax */
            transform: matrix(1, -0.3, 0, 1, 0, 0); 
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv1">
         Tutorials point.com
      </div>
   </body>
</html>

它将产生以下结果 -

矩阵向另一个方向变换。

现场演示 
<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv2 {
            /* IE 9 */
            -ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Safari */	
            -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Standard syntax */
            transform: matrix(1, 0, 0.5, 1, 150, 0); 
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv2">
         Tutorials point.com
      </div>
   </body>
</html>

它将产生以下结果 -