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ử hay hình ảnh 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. Bạn xem demo ở đây: Xoay phần tử trong CSS.

<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é !

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, là người thường đăng bài và comment dạo trên Hocban.vn

guest
6 Comments
Inline Feedbacks
View all comments
Nam Hải <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">13</span><span style="color: #e91e63;">) </span>
Friend

cũng hay nha, hóng các bài tiếp theo của bạn

Phước Đt <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">36</span><span style="color: #e91e63;">) </span>
Friend

Hay quá bác ơi….!

Minh Khanh <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">37</span><span style="color: #e91e63;">) </span>
Friend

3333 lượt xem ghê vậy