Tidadigi Logo

CSS rotateX() Function

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

Syntax:

rotateX( angle )

Parameters: Hàm này chấp nhận một tham số duy nhất là angle biểu thị góc xoay.

Góc dương và âm xoay các phần 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 rotateX() trong CSS.

Example 1:

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

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

Output:

 css-rotatex-function 

Example 2:

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

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

Output:

 css-rotatex-function 

Supported Browsers: Các trình duyệt được hỗ trợ bởi rotateX() function đượ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
  • Safari 4 trở lên
  • Opera 15 trở lên

Last Updated : 21/07/2025