CSS rotate3d实例讲解

发布时间：2025-12-09 12:02:48 浏览次数：1

rotation3d()函数是一个内置函数,用于在3D空间中围绕固定轴旋转元素。

用法:

rotate3d( x, y, z, angle )

参数:该函数接受上述和以下所述的四个参数:

x:它包含一个表示x坐标的数字。取值范围是0〜1。
y:它包含一个表示y坐标的数字。取值范围是0〜1。
z:它包含一个表示z坐标的数字。取值范围是0〜1。
angle:它保持旋转角度。正角表示顺时针旋转,负角表示逆时针旋转。

以下示例说明了CSS中的rotation3d()函数:

范例1:

<!DOCTYPE html>  <html>  <head>      <title>CSS rotate3d() function</title>      <style>          body {             text-align:center;         }         h1 {             color:green;         }         .rotate3d_image {             transform:rotate3d(1, 1, 0, 60deg);         }     </style>  </head>    <body>      <h1>GeeksforGeeks</h1>     <h2>CSS rotate3d() function</h2>     <br><br>           <img  src=  "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"        alt="GeeksforGeeks logo">  </body>  </html>

输出:

范例2:

<!DOCTYPE html>  <html>  <head>      <title>CSS rotate3d() function</title>      <style>          body {             text-align:center;         }         h1 {             color:green;         }         .GFG {             font-size:35px;             font-weight:bold;             color:green;             transform:rotate3d(1, 1, 0, 60deg);         }     </style>  </head>    <body>      <h1>GeeksforGeeks</h1>     <h2>CSS rotate3d() function</h2>     <br><br>           <p >Welcome to GeeksforGeeks</p>  </body>  </html>

输出:

支持的浏览器:以下列出了rotate3d()函数支持的浏览器:

谷歌浏览器
IE浏览器
火狐浏览器
苹果浏览器
Opera

rotate3d

上一篇：Python调试器pdb 下一篇：Knative 入门系列2

知识问答

CSS rotate3d实例讲解

综合百科

网站导航