Xoay phần tử trong CSS với thuộc tính transform rotate

Xoay phan tu trong CSS voi thuoc tinh transform rotate

Xoay phần tử trong CSS với thuộc tính transform ( rotate )

Khá đơn giản, để xoay (rotate) một phần tử trong CSS chúng ta sẻ sử dụng thuộc tính transform (rotate) với cú pháp như sau:

transform: rotate(45deg);

Trong đó số 45 có nghĩa rằng phần tử sẽ xoay một góc 45 độ theo chiều kim đồng hồ nhé ! Để hiểu thêm các bạn xem ví dụ xoay phần tử sử dụng thuộc tính transform ( rotate ):



Ở đây mình tạo một cái khung dài 200px, cao 100px với nền màu xanh dương với đoạn code bên dưới (các bạn copy và dán vào Codepen để xem nhé ! ).

<html>
    <head>
        <style>
            div {
            margin: 100px;
            width: 200px;
            height: 100px;
            background: blue;
            }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>
</html>

Nếu muốn xoay cái khung trên một góc 45 độ thì chúng ta thêm thuộc tính transform cho nó là được.

<html>
    <head>
        <style>
            div {
            margin: 100px;
            width: 200px;
            height: 100px;
            background: blue;
            transform: rotate(45deg);
            }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>
</html>

Đấy, đơn giản chỉ thế thôi. Kết quả thì cái hình ở đầu bài viết có rồi nên mình cũng không nói thêm ở đây. Rồi, nghịch thử các bạn nhé !

Xoay phần tử trong CSS với thuộc tính transform rotate
4.5 (90%) 2 votes

Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, một thanh niên đẹp ZAI, dễ thương VL 😂

avatar
2 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Hocban.vnPhước ĐtMinh Khanh Recent comment authors
Phước Đt <span class="wpdiscuz-comment-count">31 bình luận </span>

Hay quá bác ơi….!

Minh Khanh <span class="wpdiscuz-comment-count">28 bình luận </span>

3333 lượt xem ghê vậy