CSS rotate3d()实例讲解
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 class="rotate3d_image" src=
"/wp-content/cdn-uploads/20190710102234/download3.png"
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>
<div class="GFG">Welcome to GeeksforGeeks</div>
</body>
</html>
输出：
支持的浏览器：以下列出了rotate3d()函数支持的浏览器：
- 谷歌浏览器
- IE浏览器
- 火狐浏览器
- 苹果浏览器
- Opera