Tidadigi Logo

CSS transform Property

Thuộc tính transform trong CSS dùng để thay đổi không gian tọa độ của mô hình định dạng trực quan. Nó được sử dụng để thêm các hiệu ứng như skew, rotate, translate trên các phần tử.

Cú pháp:

transform: none|transform-functions|initial|inherit;

Lưu ý: Các phép biến đổi có thể là loại 2D hoặc 3D.

Các giá trị:

  • none: Không có phép biến đổi nào xảy ra.
  • matrix(x, x, x, x, x, x): Nó chỉ định một phép biến đổi ma trận loại 2D. Nó nhận 6 giá trị.
  • matrix3d(x, x, x, x, x, x, x, x, x): Nó chỉ định một phép biến đổi ma trận loại 3D. Nó nhận 9 giá trị.
  • translate(x, y): Nó chỉ định một phép tịnh tiến trên các trục X và Y.
  • translate3d(x, y, z): Nó chỉ định một phép tịnh tiến trên các trục X, Y và Z.
  • translateX(x): Nó chỉ định phép tịnh tiến dọc theo trục X.
  • translateY(y): Nó chỉ định phép tịnh tiến dọc theo trục Y.
  • translateZ(z): Nó chỉ định phép tịnh tiến dọc theo trục Z.
  • rotate(angle): Nó chỉ định góc xoay.
  • rotateX(angle): Nó chỉ định phép xoay dọc theo trục X tương ứng với góc xoay.
  • rotateY(angle): Nó chỉ định phép xoay dọc theo trục Y tương ứng với góc xoay.
  • rotateZ(angle): Nó chỉ định phép xoay dọc theo trục Z tương ứng với góc xoay.
  • scale(x, y): Nó chỉ định phép biến đổi tỷ lệ dọc theo các trục X và Y.
  • scaleX(x): Nó chỉ định phép biến đổi tỷ lệ dọc theo trục X.
  • scaleY(y): Nó chỉ định phép biến đổi tỷ lệ dọc theo trục Y.
  • scaleZ(z): Nó chỉ định phép biến đổi tỷ lệ dọc theo trục Z.
  • scale3d(x, y, z): Nó chỉ định phép biến đổi tỷ lệ dọc theo các trục X, Y và Z.
  • skew(angle, angle): Nó chỉ định phép biến đổi skew dọc theo các trục X và Y ứng với các góc skew.
  • skewX(angle): Nó chỉ định phép biến đổi skew dọc theo trục X ứng với góc skew.
  • skewY(angle): Nó chỉ định phép biến đổi skew dọc theo trục Y ứng với góc skew.
  • skewZ(angle): Nó chỉ định phép biến đổi skew dọc theo trục Z ứng với góc skew.
  • perspective(x): Nó chỉ định phối cảnh của một phần tử. Tham khảo: Perspective property
  • initial: Nó khởi tạo phần tử về giá trị mặc định của nó.
  • inherit: Nó kế thừa giá trị từ phần tử cha của nó.

Ví dụ 1: Không có thuộc tính transform.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
    }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 2: Ví dụ này mô tả giá trị thuộc tính Matrix(). 

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: matrix(1, 0, -1, 1, 1, 0);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 3: Ví dụ này mô tả giá trị thuộc tính Matrix3d().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
        transform-style: preserve-3d;
    }
    
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform-style: preserve-3d;
        position: absolute;
        transform: translate(150px, 75%, 5em)
    }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 4: Ví dụ này mô tả giá trị thuộc tính translate().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: translate(150px, 65%);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 5: Ví dụ này mô tả giá trị thuộc tính translate3d().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: translate(150px, 65%, 5em);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 6: Ví dụ này mô tả giá trị thuộc tính translateX().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: translateX(150px);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 7: Ví dụ này mô tả giá trị thuộc tính translateY(). 

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: translateY(150px);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 8: Ví dụ này mô tả giá trị thuộc tính translateZ().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: translateZ(150px);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 9: Ví dụ này mô tả giá trị thuộc tính rotate().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: rotate(45deg);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 10: Ví dụ này mô tả giá trị thuộc tính rotateX().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: rotateX(75deg);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 11: Ví dụ này mô tả giá trị thuộc tính rotateY().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: rotateY(75deg);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra: 

css-transform-property

Ví dụ 12: Ví dụ này mô tả giá trị thuộc tính rotateZ().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: rotateZ(75deg);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 13: Ví dụ này mô tả giá trị thuộc tính scale().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: scale(1, 2);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 14: Ví dụ này mô tả giá trị thuộc tính scale3d().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: scale3d(2, 1, 5);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 15: Ví dụ này mô tả giá trị thuộc tính scaleX().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: scaleX(2);
    }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 16: Ví dụ này mô tả giá trị thuộc tính scaleY().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: scaleY(2);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 17: Ví dụ này mô tả giá trị thuộc tính scaleZ().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: scaleZ(2);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 18: Ví dụ này mô tả giá trị thuộc tính skew().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: skew(30deg, 30deg);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 19: Ví dụ này mô tả giá trị thuộc tính skewX().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: skewX(30deg);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 20: Ví dụ này mô tả giá trị thuộc tính skewY().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: skewY(30deg);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 21: Ví dụ này mô tả giá trị thuộc tính perspective().

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
    .main {
        display: grid;
        padding: 30px;
        background-color: green;
    }
    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        color: green;
        transform: perspective(30px);
    }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="main">
        <div class="GFG">GeeksforGeeks</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

Đầu ra:

css-transform-property

Ví dụ 22: Ví dụ này mô tả giá trị thuộc tính initial.

HTML 
<!--Driver Code Starts-->
<html>
Last Updated : 21/07/2025