CSS3 - 3D 变换

使用 3D 变换，我们可以将元素移动到 x 轴、y 轴和 z 轴，下面的示例清楚地指定了元素将如何旋转。

3D 变换方法

以下方法用于调用 3D 变换 -

先生。 价值与描述
1

矩阵 3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

用于使用矩阵的 16 个值来变换元素
2

翻译 3d(x,y,z)

用于使用x轴、y轴和z轴变换元素
3

翻译X(x)

用于使用 x 轴变换元素
4

翻译Y(y)

用于使用 y 轴变换元素
5

平移Z(z)

用于使用 y 轴变换元素
6

尺度X(x)

用于使用 x 轴缩放变换元素
7

尺度Y(y)

用于使用 y 轴缩放变换元素
8

尺度Y(y)

用于使用 z 轴变换元素
9

旋转X（角度）

用于使用 x 轴旋转变换元素
10

旋转Y（角度）

用于使用 y 轴旋转变换元素
11

旋转Z（角度）

用于使用 z 轴旋转变换元素

X 轴 3D 变换

以下示例显示了 x 轴 3D 变换。

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

   <body>
   
      <div>
         tutorials point.com
      </div>
      
      <p>Rotate X-axis</p>
      
      <div id = "myDiv">
         tutorials point.com.
      </div>
      
   </body>
</html>

它将产生以下结果 -

Y 轴 3D 变换

以下示例显示了 y 轴 3D 变换 -

现场演示 
<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#yDiv {
            -webkit-transform: rotateY(150deg); 
            
            /* Safari */
            transform: rotateY(150deg); 
            
            /* Standard syntax */
         }
      </style>
   </head>

   <body>
   
      <div>
         tutorials point.com
      </div>
      
      <p>Rotate Y axis</p>
      
      <div id = "yDiv">
         tutorials point.com.
      </div>
      
   </body>
</html>

它将产生以下结果 -

Z 轴 3D 变换

以下示例显示了 Z 轴 3D 变换 -

现场演示 
<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#zDiv {
            -webkit-transform: rotateZ(90deg); 
            
            /* Safari */
            transform: rotateZ(90deg); 
            
            /* Standard syntax */
         }
      </style>
   </head>

   <body>
      <div>
         tutorials point.com
      </div>
      
      <p>rotate Z axis</p>
      
      <div id = "zDiv">
         tutorials point.com.
      </div>
   </body>
</html>

它将产生以下结果 -