CSS如何使用3D变换?代码示例

2021年4月8日17:36:58 发表评论 597 次浏览

它允许使用3D变换来更改元素。在3D变换中, 元素沿X轴, Y轴和Z轴旋转。

下面列出了三种主要的转换类型:

  • rotationX()
  • rotationY()
  • rotationZ()

rotationX()方法:

此旋转用于使元素绕X轴旋转给定角度。

例子:

<!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>

输出如下:

旋转x

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>

输出如下:

旋转y

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>

输出如下:

旋转z

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: