資料結構
網路
關係資料庫管理系統 (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.tw/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.tw/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.tw/redis/images/redis.jpg" alt="Redis">
<h2>Scaled Image (increased)</h2>
<img class="scale_img" src= "https://tutorialspoint.tw/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.tw/redis/images/redis.jpg" alt="Redis">
<h2>Scaled Image (decreased)</h2>
<img class="scale_img" src="https://tutorialspoint.tw/redis/images/redis.jpg" alt="Redis">
</body>
</html>
更新於：2023-12-29
105 次檢視
廣告