Hiệu ứng xoay ảnh

#Xoay ảnh

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

<style> .xoayanh360{-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;} .xoayanh360:hover{-webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);} </style> <img alt="Xoay ảnh" class="xoayanh360" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJeKSydnRox4kvI8U18nq_TjeyC5_p1OB35Tb0G9Z5lUiQHoY2GT_ChVKaYDN99Ncg41Qz7KfmKl5vhnEz1QpX1NkwX-gwITEN_AXFd03fVD9xx1_loJ8pqjbo8TCAtOl9K6puqED8T9w/s1600/images%25284%2529.jpg" width="100" />

2. Xoay ảnh 180 độ


<style> .xoayanh180{-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;} .xoayanh180:hover{-webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);} </style> <img alt="Xoay ảnh" class="xoayanh180" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJeKSydnRox4kvI8U18nq_TjeyC5_p1OB35Tb0G9Z5lUiQHoY2GT_ChVKaYDN99Ncg41Qz7KfmKl5vhnEz1QpX1NkwX-gwITEN_AXFd03fVD9xx1_loJ8pqjbo8TCAtOl9K6puqED8T9w/s1600/images%25284%2529.jpg" width="100" /> <br /> <br />
3. Xoay ảnh -360 độ, tức là quay ảnh 360 độ nhưng theo chiều ngược kim đồng hồ


<style> .xoayanh-360{-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;} .xoayanh-360:hover{-webkit-transform:rotate(-360deg); -moz-transform:rotate(-360deg); -ms-transform:rotate(-360deg); -o-transform:rotate(-360deg); transform:rotate(-360deg);} </style> <img alt="Xoay ảnh" class="xoayanh-360" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJeKSydnRox4kvI8U18nq_TjeyC5_p1OB35Tb0G9Z5lUiQHoY2GT_ChVKaYDN99Ncg41Qz7KfmKl5vhnEz1QpX1NkwX-gwITEN_AXFd03fVD9xx1_loJ8pqjbo8TCAtOl9K6puqED8T9w/s1600/images%25284%2529.jpg" width="100" /> <br />
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 độ)


<style> .xoayanhlech{-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(-60deg); -moz-transform:rotate(-30deg); -ms-transform:rotate(-30deg); -o-transform:rotate(-30deg); transform:rotate(-30deg); } .xoayanhlech:hover{ -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);} </style> <img alt="Xoay ảnh" class="xoayanhlech" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJeKSydnRox4kvI8U18nq_TjeyC5_p1OB35Tb0G9Z5lUiQHoY2GT_ChVKaYDN99Ncg41Qz7KfmKl5vhnEz1QpX1NkwX-gwITEN_AXFd03fVD9xx1_loJ8pqjbo8TCAtOl9K6puqED8T9w/s1600/images%25284%2529.jpg" width="100" /> <br />
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.


<style> .xoayanhlientuc: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);} } </style> <img alt="Xoay ảnh" class="xoayanhlientuc" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJeKSydnRox4kvI8U18nq_TjeyC5_p1OB35Tb0G9Z5lUiQHoY2GT_ChVKaYDN99Ncg41Qz7KfmKl5vhnEz1QpX1NkwX-gwITEN_AXFd03fVD9xx1_loJ8pqjbo8TCAtOl9K6puqED8T9w/s1600/images%25284%2529.jpg" width="100" /> <br /> <br />

#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

<style> .phongnhoanh{ -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*/ } .phongnhoanh: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*/} </style> <img alt="Xoay ảnh" class="phongnhoanh" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJeKSydnRox4kvI8U18nq_TjeyC5_p1OB35Tb0G9Z5lUiQHoY2GT_ChVKaYDN99Ncg41Qz7KfmKl5vhnEz1QpX1NkwX-gwITEN_AXFd03fVD9xx1_loJ8pqjbo8TCAtOl9K6puqED8T9w/s1600/images%25284%2529.jpg" width="100" /><br /> <br />
2. Phóng to ảnh khi hover (phóng to 1.1 lần so với kích thước ban đầu)

<style> .phongtoanh{ -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*/ } .phongtoanh: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*/} </style> <img alt="Xoay ảnh" class="phongtoanh" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJeKSydnRox4kvI8U18nq_TjeyC5_p1OB35Tb0G9Z5lUiQHoY2GT_ChVKaYDN99Ncg41Qz7KfmKl5vhnEz1QpX1NkwX-gwITEN_AXFd03fVD9xx1_loJ8pqjbo8TCAtOl9K6puqED8T9w/s1600/images%25284%2529.jpg" width="100" /><br /> <br />
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 

<style> .phongtonhoanh{-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*/ } .phongtonhoanh: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*/} </style> <img alt="Xoay ảnh" class="phongtonhoanh" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJeKSydnRox4kvI8U18nq_TjeyC5_p1OB35Tb0G9Z5lUiQHoY2GT_ChVKaYDN99Ncg41Qz7KfmKl5vhnEz1QpX1NkwX-gwITEN_AXFd03fVD9xx1_loJ8pqjbo8TCAtOl9K6puqED8T9w/s1600/images%25284%2529.jpg" width="100" /><br /> <br />

#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)

<style> .lammoanh{opacity: 0.5; } .lammoanh:hover{opacity: 1; } </style> <img alt="Xoay ảnh" class="lammoanh" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJeKSydnRox4kvI8U18nq_TjeyC5_p1OB35Tb0G9Z5lUiQHoY2GT_ChVKaYDN99Ncg41Qz7KfmKl5vhnEz1QpX1NkwX-gwITEN_AXFd03fVD9xx1_loJ8pqjbo8TCAtOl9K6puqED8T9w/s1600/images%25284%2529.jpg" width="100" /><br /> <br />

#Hiệu ứng bo góc

1. Bo cả 4 góc


< <style> .bogoc{ -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; } .bogoc:hover{ -moz-border-radius: 1px; -webkit-border-radius: 1px; -ms-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; } </style> <img alt="Xoay ảnh" class="bogoc" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXj8V9INhLZWQjrEi0HLU6epHwDtTVQWSfJd-g1UhqH89oCTXH1SDjLsAMASEDFiFGHt-lNYG47oGkD4heyTUPa7_flwua_A5TXdabPah_2dIPzEvi8mPDeszTSmTqLDOVsT7cmtIktbE/w80-c-h60/facebook.jpg" width="100"> <br />
2. Bo góc trên bên trái và góc dưới bên phải
 

<style> .bogoc2{ -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; } .bogoc2:hover{ -moz-border-radius: 1px; -webkit-border-radius: 1px; -ms-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; } </style> <img alt="Xoay ảnh" class="bogoc2" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXj8V9INhLZWQjrEi0HLU6epHwDtTVQWSfJd-g1UhqH89oCTXH1SDjLsAMASEDFiFGHt-lNYG47oGkD4heyTUPa7_flwua_A5TXdabPah_2dIPzEvi8mPDeszTSmTqLDOVsT7cmtIktbE/w80-c-h60/facebook.jpg" width="100"><br /> <br />
3. Bo góc trên bên phải và góc dưới bên trái


<style> .bogoc3{ -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; } .bogoc3:hover{ -moz-border-radius: 1px; -webkit-border-radius: 1px; -ms-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; } </style> <img alt="Xoay ảnh" class="bogoc3" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXj8V9INhLZWQjrEi0HLU6epHwDtTVQWSfJd-g1UhqH89oCTXH1SDjLsAMASEDFiFGHt-lNYG47oGkD4heyTUPa7_flwua_A5TXdabPah_2dIPzEvi8mPDeszTSmTqLDOVsT7cmtIktbE/w80-c-h60/facebook.jpg" width="100"> <br />

#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.