Hàm scaleZ() là một hàm dựng sẵn dùng để thay đổi kích thước phần tử theo trục z.
Cú pháp:
scaleZ( z )
Tham số: Hàm này chấp nhận một tham số duy nhất là z. Nó giữ hệ số tỷ lệ dọc theo trục z.
Các ví dụ dưới đây minh họa việc sử dụng hàm scaleZ() trong CSS.
Ví dụ 1:
html<!DOCTYPE html>
<html>
<head>
<title>CSS scaleZ() function</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.scaleZ_image {
transform: perspective(500px) scaleZ(3) rotateX(45deg);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS scaleZ() function</h2>
<img class="scaleZ_image" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo">
</body>
</html>
Đầu ra:
Ví dụ 2:
html<!DOCTYPE html>
<html>
<head>
<title>CSS scaleZ() function</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.GFG {
font-size:35px;
font-weight:bold;
color:green;
transform: perspective(300px) scaleZ(3) rotateX(45deg);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS scaleZ() function</h2>
<div class="GFG">Welcome to GeeksforGeeks</div>
</body>
</html>
Đầu ra:
Trình duyệt được hỗ trợ: Dưới đây là danh sách các trình duyệt hỗ trợ hàm scaleZ().
- Google Chrome 12
- Edge 12
- Internet Explorer 10
- Firefox 10
- Safari 4
- Opera 15