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

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);
}