Xoay hình ảnh bằng CSS - transform: rotate() trong CSS

Xoay hình ảnh là gì ?


Xoay hình ảnh (rotate:xoay , rotation:vòng xoay) là thao tác xoay hình ảnh thôi chứ gì nữa mà phải giải thích - sự thật tui không biết giải thích như nào😅. Nhưng đơn giản các ông cứ nhìn vào hai hình dưới đây
Xoay hình ảnh bằng CSS - transform: rotate() trong CSS Xoay hình ảnh bằng CSS - transform: rotate() trong CSS
Như vậy thì các ông đã hiểu xoay ảnh là gì chứ nhỉ?

Xoay ảnh trong CSS

Trong CSS để xoay ảnh chúng ta sử dụng transform: rotate(x)
Trong đó x là một đơn vị xoay tính bằng deg và tất nhiên x nằm trong khoảng từ 0 đến 360 (độ).
Để sử dụng thì cũng khá là đơn giản, như ở ví dụ trên, tui đã xoay ảnh một góc 180 (độ). Như vậy cấu trúc lệnh tui sử dụng đó là
img {
    -webkit-transform: rotate(180deg); /* Cái này dành cho một số trình duyệt */
    transform: rotate(180deg);
}