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

Không biết bạn đã từng đọc qua các nội dung dưới đây chưa nhỉ ?

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