Hàm CSS rotate() xoay element một góc độ nhất định. Xoay theo chiều kim đồng hồ dùng số độ dương. Xoay ngược chiều kim đồng hồ dùng số độ âm.
Hôm nay học cách xoay element với CSS. Tại sao xoay element? Làm web page interactive hơn. Dùng đúng, element xoay thêm thẩm mỹ cho site.
Đọc bài này, tham khảo repo đi kèm để thấy concept in action. Biết xoay element sẽ là thêm valuable cho CSS toolbox.
CSS rotate()
Hàm CSS rotate() xoay element trên trục 2D. Chấp nhận 1 argument: góc độ muốn xoay web element. Xoay theo hoặc ngược chiều kim đồng hồ.
Cú pháp rotate():
transform: rotate(angle);
Giá trị "angle" = số độ element xoay. Số độ dương (45) = xoay theo chiều kim đồng hồ. Số độ âm (-39) = xoay ngược chiều.
rotate() áp dụng cho bất kỳ HTML element nào. Ví dụ: xoay paragraph text, hoặc xoay hình ảnh.
HTML rotate xuất hiện ngay khi render page nên không thấy visible rotate. Để xem rotating in action, dùng CSS transition. Transition thay đổi state element khi action xảy ra (ví dụ: hover cursor).
Ví Dụ rotate() CSS
Tạo HTML page đặt rotating box. Thêm box as div, class "rotate":
<div class="rotate"></div>
Thêm styling:
div.rotate { width: 50px; height: 50px; background-color: chocolate; }
Refresh. Có colored box. Với box này, có đủ để dùng rotate().
Để xoay box, cần thảo luận property transform trước.
CSS transform function transform element. Một function áp dụng cho nó là rotate(). transform nhận nhiều function khác, làm được nhiều việc. Rotate chỉ 1 trong số đó.
rotate function di chuyển element. Nhận 1 argument: số độ skew element. Apply xoay 35 độ dương:
div.rotate { width: 50px; height: 50px; background-color: chocolate; transform: rotate(35deg); }
Đã xoay box! Tap yourself on the back.
Khi Nào Dùng CSS Transform rotate()
Rotate cho fancy UI ideas hoặc xoay ảnh. Ví dụ: xoay 180 độ ảnh. Cần ảnh xoay đó nơi khác → save và dùng.
Cũng có thể xoay text. Giả sử layout mimic magazine, xoay text để add emphasis cho text element.
Chưa hết, rotate() cho phép animations cool!
Dùng CSS :hover selector trên div để apply hiệu ứng xoay đẹp:
.rotate:hover { transform: rotate(35deg); background-color: deeppink; }
Cool không? 😎
Box xoay khi hover chuột. Dùng background-color đổi màu box khi hover.
Kết Luận
CSS rotate() function làm web element xuất hiện ở góc nghiêng. Chấp nhận 1 argument: số độ element xoay. Có thể chỉ định giá trị độ dương hoặc âm.
Xoay element làm web page thẩm mỹ hơn. Ví dụ: apply rotate cho box khi user hover. Hoặc xoay link khi user hover. Tùy bạn dùng skill này như thế nào!
Muốn học thêm CSS? Xem complete How to Learn CSS guide – expert advice và guidance top learning resources.