数据结构
网络
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.com/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.com/redis/images/redis.jpg" alt="Redis">
<h2>Rotated Image (rotate3d)</h2>
<img class="rotate_img" src= "https://tutorialspoint.com/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.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>
131 次查看
