Tidadigi Logo

CSS rotateZ() Function

Hàm rotateZ() là một hàm dựng sẵn dùng để xoay một phần tử quanh trục z.

Cú pháp:

rotateZ( angle )

Tham số: Hàm này nhận một tham số duy nhất là angle, đại diện cho góc xoay. Góc dương xoay theo chiều kim đồng hồ. Góc âm xoay ngược chiều kim đồng hồ.

Các ví dụ dưới đây minh họa cách sử dụng hàm rotateZ() trong CSS.

Ví dụ 1:

html 
<!DOCTYPE html>
<html>

<head>
    <title>CSS rotateZ() function</title>

    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
        }
        .rotateZ_image {
            transform: rotateZ(45deg);
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>CSS rotateZ() function</h2>

    <br><br>

    <img class="rotateZ_image" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
         alt="GeeksforGeeks logo">
</body>

</html>

Đầu ra:

 css-rotatez-function 

Ví dụ 2:

html 
<!DOCTYPE html>
<html>

<head>
    <title>CSS rotateZ() function</title>

    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
        }
        .GFG {
            font-size: 35px;
            font-weight: bold;
            color: green;
            transform: rotateZ(45deg);
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>CSS rotateZ() function</h2>

    <br><br>

    <div class="GFG">Welcome to GeeksforGeeks</div>
</body>

</html>

Đầu ra:

 css-rotatez-function 

Các trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi hàm rotateZ() được liệt kê dưới đây:

  • Google Chrome 12 trở lên
  • Edge 12 trở lên
  • Internet Explorer 10 trở lên
  • Firefox 10 trở lên
  • Opera 15 trở lên
  • Safari 4 trở lên

Last Updated : 21/07/2025