CSS如何使用3D变换（代码示例） _CSS旋转

它允许使用3D变换来更改元素。在3D变换中, 元素沿X轴, Y轴和Z轴旋转。
下面列出了三种主要的转换类型：

rotationX()
rotationY()
rotationZ()

rotationX()方法：
此旋转用于使元素绕X轴旋转给定角度。
【CSS如何使用3D变换（代码示例）】例子：

< !DOCTYPE html> < html> < head> < title> 3D Transformation< /title> < style> .normal_div { width: 300px; height: 150px; color: white; font-size:25px; background-color: green; border: 1px solid black; margin-bottom:20px; }#rotateX { width: 300px; height: 150px; color: white; font-size:25px; background-color: green; border: 1px solid black; -webkit-transform: rotateX(180deg); /* Safari */ transform: rotateX(180deg); /* Standard syntax */} .gfg { font-size:40px; font-weight:bold; color:#090; } .geeks { font-size:25px; font-weight:bold; margin:20px 0; } < /style> < /head> < body> < center> < div class = "gfg"> lsbin< /div> < div class = "geeks"> rotateX() Method< /div> < div class = "normal_div"> Div Contents... < /div> < div id = "rotateX"> 180 degree rotated contents...< /div> < /center> < /body> < /html>

输出如下：

文章图片
rotationY()方法：
此方法用于以给定的角度绕Y轴旋转元素。
例子：

< !DOCTYPE html> < html> < head> < title> 3D Transformation< /title> < style> .normal_div { width: 200px; color:white; font-size:25px; height: 100px; background-color: green; border: 1px solid black; margin-bottom:20px; }#rotateY { width: 200px; color:white; font-size:25px; height: 100px; background-color: green; border: 1px solid black; -webkit-transform: rotateY(180deg); /* Safari */ transform: rotateY(100deg); /* Standard syntax */ } .gfg { font-size:40px; font-weight:bold; color:#090; } .geeks { font-size:25px; font-weight:bold; margin:20px 0; } < /style> < /head> < body> < center> < div class = "gfg"> lsbin< /div> < div class = "geeks"> rotateY() Method< /div> < div class = "normal_div"> Div Contents... < /div> < div id = "rotateY"> 180 degree rotated div contents...< /div> < /center> < /body> < /html>

输出如下：

文章图片
rotationZ()方法：
此方法用于将元素绕Z轴旋转给定角度。
例子：

< !DOCTYPE html> < html> < head> < title> 3D Transformation< /title> < style> .normal_div { width: 200px; height: 100px; font-size:25px; color:white; background-color: green; border: 1px solid black; }#rotateZ { width: 200px; height: 100px; color:white; font-size:25px; background-color: green; border: 1px solid black; -webkit-transform: rotateZ(90deg); /* Safari */ transform: rotateZ(90deg); /* Standard syntax */ } .gfg { font-size:40px; font-weight:bold; color:#090; } .geeks { font-size:25px; font-weight:bold; margin:20px 0; } < /style> < /head> < body> < center> < div class = "gfg"> lsbin< /div> < div class = "geeks"> rotateZ() Method< /div> < div class = "normal_div"> Div Contents... < /div> < div id = "rotateZ"> 90 degree rotated contents...< /div> < /center> < /body> < /html>

输出如下：