Hàm CSS3 scale3d() - Phóng to/thu nhỏ trong không gian 3D

Hàm scale3d() được sử dụng để thay đổi tỷ lệ của một phần tử trong không gian 3D. Phần tử được phóng to hoặc thu nhỏ dựa trên các số được đặt làm tham số.

Ví dụ 1

<!DOCTYPE html>
<html>
<head>
<style>
.scale3d_img {
  transform: scale3d(0.5, 1, 1.7);
}
</style>
</head>
<body>
<h1>Học tập</h1>
<p>Học Apache Spark</p>
<img class="scale3d_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>

Kết quả

Ví dụ 2: Sử dụng giá trị âm

<!DOCTYPE html>
<html>
<head>
<style>
.scale3d_img {
  transform: scale3d(-1.4, 0.4, 0.7);
}
</style>
</head>
<body>
<h1>Học tập</h1>
<p>Học Apache Spark</p>
<img class="scale3d_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>

Kết quả

Cú pháp:

transform: scale3d(sx, sy, sz);

• sx: Hệ số tỷ lệ theo trục X
• sy: Hệ số tỷ lệ theo trục Y
• sz: Hệ số tỷ lệ theo trục Z

Lưu ý: Giá trị âm sẽ lật phần tử theo trục tương ứng. Giá trị 1 giữ nguyên kích thước, lớn hơn 1 phóng to, nhỏ hơn 1 thu nhỏ.