数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究CSS3 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>
使用负值缩放图像
让我们再看一个例子。在这个例子中，我们将使用 scale3d() 方法的 x 轴设置一个负值来缩放图像：
.scale3d_img {
transform: scale3d(-1.4, 0.4, 0.7);
}
示例
让我们来看一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
.scale3d_img {
transform: scale3d(-1.4, 0.4, 0.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>
在 3D 空间中增加元素大小
在这个示例中，我们已将 transform 属性设置为在 3D 空间中缩放元素大小。因此，所有 x、y 和 z 轴都已设置。scale3d() 方法的值大于 1 将会增加元素的大小：
transform: scale3d(1.2, 2.1, 2.2);
示例
让我们来看一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {
background-color:rgba(108,111,35,0.6);
font-size:35px;
color:yellow;
transform: scale3d(1.2, 2.1, 2.2);
text-align: center;
}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>
在 3D 空间中减小元素大小
在这个示例中，我们已将 transform 属性设置为在 3D 空间中缩放元素大小。因此，所有 x、y 和 z 轴都已设置。scale3d() 方法的值小于 1 将会减小元素的大小：
transform: scale3d(0.5, 0.8, 0.2);
示例
让我们来看一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {
background-color:rgba(108,111,35,0.6);
font-size:35px;
color:yellow;
transform: scale3d(0.5, 0.8, 0.2);
text-align: center;
}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>
在 3D 空间中增加图像大小
在这个示例中，我们已将 transform 属性设置为缩放图像大小。如果 scale3d() 设置的值大于 1，则会增加图像的大小，如下所示：
transform: scale3d(1.2, 2.5, 2.1);
示例
让我们来看一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
.scale_img {
transform: scale3d(1.2, 2.5, 2.1);
}
</style>
</head>
<body>
<h1>Scale an image</h1>
<h2>Original Image</h2>
<img src= "https://tutorialspoint.com/redis/images/redis.jpg" alt="Redis">
<h2>Scaled Image (increased)</h2>
<img class="scale_img" src= "https://tutorialspoint.com/redis/images/redis.jpg" alt="Redis">
</body>
</html>
在 3D 空间中减小图像大小
在这个示例中，我们已将 transform 属性设置为缩放图像大小。如果 scale3d() 设置的值小于 1，则会减小图像的大小，如下所示：
transform: scale3d(0.6, 0.5, 0.9);
示例
让我们来看一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
.scale_img {
transform: scale3d(0.6, 0.5, 0.9);
}
</style>
</head>
<body>
<h1>Scale an image</h1>
<h2>Original Image</h2>
<img src= "https://tutorialspoint.com/redis/images/redis.jpg" alt="Redis">
<h2>Scaled Image (decreased)</h2>
<img class="scale_img" src="https://tutorialspoint.com/redis/images/redis.jpg" alt="Redis">
</body>
</html>
更新于：2023-12-29
105 次查看
广告