Tidadigi Logo

CSS rotateY() Function

Hàm rotateY() là một hàm tích hợp sẵn, dùng để xoay một phần tử quanh trục dọc.

Cú pháp:

rotateY( angle )

Tham số: Hàm này nhận một tham số duy nhất là angle, biểu thị góc xoay. Các góc dương và âm sẽ xoay phần tử theo chiều kim đồng hồ và ngược chiều kim đồng hồ tương ứng. Các ví dụ dưới đây minh họa rotateY() function trong CSS.

Ví dụ 1:

html 
<!DOCTYPE html> 
<html> 
<head> 
    <title>CSS rotateY() function</title> 
    <style> 
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        .rotateY_image {
            transform: rotateY(60deg);
        }
    </style> 
</head> 

<body> 
    <h1>GeeksforGeeks</h1>
    <h2>CSS rotateY() function</h2>
    
    <img class="rotateY_image" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo"> 
</body> 
</html>

Đầu ra:

 css-rotatey-function 

Ví dụ 2:

html 
<!DOCTYPE html> 
<html> 
<head> 
    <title>CSS rotateY() function</title> 
    <style> 
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        .GFG {
            font-size:35px;
            font-weight:bold;
            color:green;
            transform: rotateY(60deg);
        }
    </style> 
</head> 

<body> 
    <h1>GeeksforGeeks</h1>
    <h2>CSS rotateY() function</h2>
    
    <div class="GFG">Welcome to GeeksforGeeks</div> 
</body> 
</html>

Đầu ra:

 css-rotatey-function 

Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi rotateY() function được liệt kê bên dưới:

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

Last Updated : 21/07/2025