資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 CSS3 3D 變換函式
使用 3D 變換，我們可以將元素移動到 x 軸、y 軸和 z 軸。以下是 CSS3 3D 變換的一些方法：
序號 |
值和描述 |
|---|---|
1 |
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 使用矩陣的 16 個值來變換元素 |
2 |
translate3d(x,y,z) 使用 x 軸、y 軸和 z 軸來變換元素 |
3 |
translateX(x) 使用 x 軸來變換元素 |
4 |
translateY(y) 使用 y 軸來變換元素 |
5 |
translateZ(z) 使用 y 軸來變換元素 |
6 |
rotate3d(x,y,x) 用於旋轉元素 |
7 |
scale3d(x,yz) 用於縮放元素 |
讓我們看一些例子。
matrix3d() 函式
CSS 中的 matrix3d() 函式用於定義一個 4x4 的齊次 3D 變換矩陣。可以使用 matrix3d() 建立一個包含 16 個值的 4x4 矩陣。
以下是 matrix3d() 函式的語法：
matrix3d( a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4 )
上述函式包含 16 個值，即引數：
a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3 - 線性變換的值。
a4, b4, c4, d4 - 平移的值。
在這個例子中，我們使用了 transform 屬性和 matrix3d() 方法來進行 3d 變換矩陣：
.demo_img {
transform: matrix3d(1,1,0,0,0,1,0,0,0,0,1,0,1,100,0,1);
}
示例
讓我們看看這個例子：
<!DOCTYPE html>
<html>
<head>
<style>
.demo_img {
transform: matrix3d(1,1,0,0,0,1,0,0,0,0,1,0,1,100,0,1);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p>Learn Apache Spark</p>
<img class="demo_img" src="https://tutorialspoint.tw/machine_learning/images/machine-learning-mini-logo.jpg" alt="Apache Spark">
</body>
</html>
rotate3d() 函式
CSS 中的 rotate3d() 函式用於在 3D 空間中旋轉元素。將旋轉量和角度設定為 rotate3d() 的引數。
以下是 rotate3d() 方法的語法：
rotate3d(x,y,z,angle)
上面，x、y、z 分別是 x 軸、y 軸和 z 軸。angle 是旋轉角度：
正角度 - 順時針旋轉
負角度 - 逆時針旋轉
在這個例子中，我們設定了 x、y、z 軸。我們使用正角度設定了順時針旋轉：
.rotate_img {
transform: rotate3d(1, 2, 3, 45deg);
}
示例
讓我們看看這個例子：
<!DOCTYPE html>
<html>
<head>
<style>
.rotate_img {
transform: rotate3d(1, 2, 3, 45deg);
}
</style>
</head>
<body>
<h1>Scale an image</h1>
<h2>Original Image</h2>
<img src= "https://tutorialspoint.tw/redis/images/redis.jpg" alt="Redis">
<h2>Rotated Image (rotate3d)</h2>
<img class="rotate_img" src= "https://tutorialspoint.tw/redis/images/redis.jpg" alt="Redis">
</body>
</html>
scale3d() 函式
scale3d() 函式用於在 3D 空間中縮放元素。元素根據設定為引數的數字進行縮放。
以下是 scale() 方法的語法：
scale3d(x,y,z)
上面，x、y、z 分別是 x 軸、y 軸和 z 軸。
現在讓我們看另一個例子。在這個例子中，我們將使用 scale3d() 方法中的 x、y 和 z 值來縮放影像：
.scale3d_img {
transform: scale3d(-1.4, 0.4, 0.7);
}
示例
讓我們看看這個例子：
<!DOCTYPE html>
<html>
<head>
<style>
.scale3d_img {
transform: scale3d(0.5, 1, 1.7);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p>Learn Apache Spark</p>
<img class="scale3d_img" src= "https://tutorialspoint.tw/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>
131 次檢視
