CSS3 - 2d变换（CSS3 - 2d transform）

优质

小牛编辑

125浏览

2023-12-01

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

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

Sr.No.	价值和描述
1	matrix(n,n,n,n,n,n) 用于定义具有六个值的矩阵变换
2	translate(x,y) 用于将元素与x轴和y轴一起转换
3	translateX(n) 用于将元素与x轴一起转换
4	translateY(n) 用于将元素与y轴一起转换
5	scale(x,y) 用于更改元素的宽度和高度
6	scaleX(n) 用于更改元素的宽度
7	scaleY(n) 用于更改元素的高度
8	rotate(angle) 用于根据角度旋转元素
9	skewX(angle) 用于定义倾斜变换以及x轴
10	skewY(angle) 用于定义偏斜变换以及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>
         xnip.cn.
      </div>
      <div id = "myDiv">
         xnip.cn
      </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>
         xnip.cn.
      </div>
      <div id = "myDiv">
         xnip.cn
      </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>
         xnip.cn.
      </div>
      <div id = "skewDiv">
         xnip.cn
      </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>
         xnip.cn.
      </div>
      <div id = "skewDiv">
         xnip.cn
      </div>
   </body>
</html>

矩阵变换

使用Matrix变换的框旋转如下所示 -

<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>
         xnip.cn.
      </div>
      <div id = "myDiv1">
         xnip.cn
      </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>
         xnip.cn.
      </div>
      <div id = "myDiv2">
         xnip.cn
      </div>
   </body>
</html>