📌  相关文章
📜  CSS3-3D变换

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

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

3D转换方法

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

Sr.No. Value & Description
1

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

Used to transforms the element by using 16 values of matrix
2

translate3d(x,y,z)

Used to transforms the element by using x-axis,y-axis and z-axis
3

translateX(x)

Used to transforms the element by using x-axis
4

translateY(y)

Used to transforms the element by using y-axis
5

translateZ(z)

Used to transforms the element by using y-axis
6

scaleX(x)

Used to scale transforms the element by using x-axis
7

scaleY(y)

Used to scale transforms the element by using y-axis
8

scaleY(y)

Used to transforms the element by using z-axis
9

rotateX(angle)

Used to rotate transforms the element by using x-axis
10

rotateY(angle)

Used to rotate transforms the element by using y-axis
11

rotateZ(angle)

Used to rotate transforms the element by using z-axis

X轴3D变换

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

现场演示

   

   
   
      

         tutorials point.com
      

      
      
Rotate X-axis

      
      

         tutorials point.com.

它将产生以下结果-

Y轴3D变换

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

现场演示

   

   
   
      

         tutorials point.com
      

      
      
Rotate Y axis

      
      

         tutorials point.com.

它将产生以下结果-

Z轴3D变换

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

现场演示

   

   
      

         tutorials point.com
      

      
      
rotate Z axis

      
      

         tutorials point.com.

它将产生以下结果-