Hiệu ứng xoay tròn hình ảnh cho Blogger

Bài này mình sẽ hướng dẫn các bạn tạo hiệu ứng quay một hình ảnh từ hình vuông sang hình tròn trong khá là hấp dẫn và bắt mắt độc giả. Bên trên là hình ảnh Demo, bạn chạm vào để xem hiệu ứng nhé. Vì đây là hiệu ứng bằng CSS nên bạn có thể yên tâm về tốc độ tải trang của mình.

Các bước thực hiện

Bước 1: Vào chỉnh sửa HTML và thêm vào trước thẻ đóng ]]></b:skin> đoạn CSS sau:

.post img {
    border: 2px solid #098047;
    overflow: hidden;
    transition: all .5s ease;
    margin: 20px;
}

.post img:hover {
    border-radius: 50%;
    transform: rotate(360deg);
}

Trong đó 

border: 2px solid #098047;

Là đường viền cho hình ảnh, bạn có thể xóa nó đi nếu thấy không cần thiết.
25px là kích thước viền
#098047 là màu đường viền

Bước 2: Nhấn Lưu mẫu

Chúc bạn thành công!