Tidadigi Logo

CSS rotate() Function

Hàm rotate() là một hàm CSS dựng sẵn dùng để xoay một phần tử theo góc chỉ định. Góc này có thể được đặt theo độ, grad, radian, hoặc vòng quay. Các góc dương và âm sẽ xoay các phần tử theo chiều kim đồng hồ và ngược chiều kim đồng hồ.

Syntax:

rotate( angle )

Parameters: Hàm này chấp nhận một tham số duy nhất là angle đại diện cho góc xoay. Các góc dương và âm xoay các phần tử lần lượt theo chiều kim đồng hồ và ngược chiều kim đồng hồ.

Các ví dụ dưới đây minh họa hàm rotate() trong CSS:

Example 1: Trong ví dụ này, chúng ta căn giữa nội dung và xoay ảnh 45 độ bằng CSS transform: rotate(45deg);. Chúng ta hiển thị logo "GeeksforGeeks" với tiêu đề màu xanh lá cây và căn giữa.

html 
<!DOCTYPE html>
<html>

<head>
    <title>CSS rotate() function</title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        .rotate_image {
            transform: rotate(45deg);
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>CSS rotate() function</h2>
    <br><br>

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

</html>

Output:css-rotate-function

Example 2: Trong ví dụ này, chúng ta căn giữa nội dung và hiển thị "GeeksforGeeks" màu xanh lá cây. Chúng ta xoay "Welcome to GeeksforGeeks" 30 độ bằng CSS transform: rotate(30deg);.

html 
<!DOCTYPE html>
<html>

<head>
    <title>CSS rotate() function</title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        .GFG {
            font-size: 35px;
            font-weight: bold;
            color: green;
            transform: rotate(30deg);
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>CSS rotate() function</h2>
    <br><br>

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

</html>

Output:css-rotate-function

Supported Browsers: Các trình duyệt được hỗ trợ bởi rotate() function được liệt kê dưới đây:


Last Updated : 21/07/2025