xoay ảnh

#Xoay ảnh

1. Xoay ảnh 360 độ trong 0.5 giây

.post img {
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
.post img:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}

2. Xoay ảnh 180 độ

.post img {
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
.post img:hover {
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}

3. Xoay ảnh -360 độ, tức là quay ảnh 360 độ nhưng theo chiều ngược kim đồng hồ

.post img{-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;}
.post img:hover{-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
transform:rotate(-360deg);}

4. Ban đầu thì làm cho hình ảnh bị lệch (-30 độ) nhưng khi hover thì hình ảnh trở về vị trí cân bằng(0 độ)

.post img{-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;

-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-ms-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
transform:rotate(-30deg);
}
.post img:hover{
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}

5. Xoay ảnh liên tục khi hover, đây là một hiệu ứng khá đẹp mắt. Ảnh sẽ được xoay liên tục khi bạn hover, khi không còn hover nữa thì ảnh ngừng chuyển động.

.post img:hover{
animation xoayanhlientuc1 2s linear infinite;
-moz-animation: xoayanhlientuc1 2s linear infinite;
-webkit-animation: xoayanhlientuc1 2s linear infinite;
-o-animation: xoayanhlientuc1 2s linear infinite;
}

@keyframes xoayanhlientuc1{
    from {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
/* Hien thi cho Safari and Chrome */
@-webkit-keyframes xoayanhlientuc1 {
    from {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}

/* Hien thi cho Firefox */
@-moz-keyframes xoayanhlientuc1{
    from {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}

/* Hien thi cho Opera */
@-o-keyframes xoayanhlientuc1{
    from {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}

#Thay đổi kích thước ảnh

1. Thu nhỏ ảnh khi hover (xảy ra trong 0.5s) thu nhỏ ảnh còn 0.8 so với ban đầu

.post img{
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
margin: 0 10px 5px 0; /*margin between images*/
}
.post img:hover{
-webkit-transform:scale(0.8); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/}

2. Phóng to ảnh khi hover (phóng to 1.1 lần so với kích thước ban đầu)

.post img{
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
margin: 0 10px 5px 0; /*margin between images*/
}
.post img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/}

3. Ban đầu thì thu nhỏ ảnh(0.8), sau khi hover thì ảnh sẽ được phóng to ra(1.1), đây là sự kết hợp 

.post img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
margin: 0 10px 5px 0; /*margin between images*/
}
.post img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
}

#Làm mờ ảnh

Ban đầu ảnh sẽ được làm mờ(0.5) nhưng sau khi hover thì ảnh sẽ hiện rõ ra(1)

.post img{opacity: 0.5;
}
.post img:hover{opacity: 1;
}

#Hiệu ứng bo góc

1. Bo cả 4 góc

.post img{
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
-moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
}
.post img:hover{
-moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;
}

2. Bo góc trên bên trái và góc dưới bên phải
 

.post img{
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
-moz-border-radius: 30px 1px 30px 1px;
    -webkit-border-radius: 30px 1px  30px 1px;
    -ms-border-radius: 30px 1px 30px 1px;
    -o-border-radius: 30px 1px 30px 1px;
    border-radius: 30px 1px 30px 1px;
}
.post img:hover{
-moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;
}

3. Bo góc trên bên phải và góc dưới bên trái

.post img{
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
-moz-border-radius: 1px 30px 1px 30px ;
    -webkit-border-radius:  1px  30px 1px 30px;
    -ms-border-radius:  1px 30px 1px 30px;
    -o-border-radius:  1px 30px 1px 30px;
    border-radius: 1px 30px 1px  30px;
}
.post img:hover{
-moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;
}

#Sử dụng kết hợp nhiều hiệu ứng

Bạn có thể kết hợp sử dụng nhiều hiệu ứng, chẳng hạn như bạn có thể kết hợp hiệu ứng làm mờ ảnh và hiệu ứng thay đổi kích thước.
Để kết hợp được nhiều hiệu ứng lại thì bạn cứ việc chèn thêm css của nó vào trước thẻ ]]></b:skin> là được.
Lưu ý: Khi kết hợp thì phải hợp lí, bạn không thể kết hợp hiệu ứng thu nhỏ và hiệu ứng phóng to ảnh khi hover được.