Home » Web Development » Web Development
02/06/2021 15516 lượt xem 15516 lượt xem
Xoay phần tử trong CSS với thuộc tính transform [ rotate ]
Trong bài viết này mình hướng dẫn bạn cách để xoay phần tử trong CSS với thuộc tính transform rotate. Bạn có thể dùng để xoay hình ảnh, nội dung có khung viền hay một cái gì đó muốn trên trang web.
Cách 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é ! ].
div { margin: 100px; width: 200px; height: 100px; background: blue; }
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.Xoay phần tử trong CSS.
div { margin: 100px; width: 200px; height: 100px; background: blue; transform: rotate[45deg]; }
Đấ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é !
About The Author
Tịnh NguyễnHọc Bạn.vn là blog chia sẻ kinh nghiệm, thủ thuật về WordPress và Web Development hướng đến người làm web không chuyên | Chủ yếu là giúp mọi người giải quyết các vấn đề nhỏ khi làm web với WordPress | Tịnh Nguyễn cảm ơn anh chị em đã ỦNG HỘ giúp Hocban.vn có thêm nguồn lực để phát triển. là blog chia sẻ kinh nghiệm, thủ thuật về WordPress và Web Development hướng đến người làm web không chuyên | Chủ yếu là giúp mọi người giải quyết các vấn đề nhỏ khi làm web với WordPress | Tịnh Nguyễn cảm ơn anh chị em đã ỦNG HỘ giúp Hocban.vn có thêm nguồn lực để phát triển.
Xem thảo luận Nội dung chính ShowShow