欢迎!我白天是个邮递员,晚上就是个有抱负的演员。这是我的网站。我住在天朝的帝都,有条叫做Jack的狗。
效果一:360°旋转 修改rotate(旋转度数)
.img1 {transition: All 0.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out;-moz-transition: All 0.4s ease-in-out;-o-transition: All 0.4s ease-in-out;}.img1:hover {transform: rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);}
效果二:放大 修改scale(放大的值)
.img2 {transition: All 0.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out;-moz-transition: All 0.4s ease-in-out;-o-transition: All 0.4s ease-in-out;}.img2:hover {transform: scale(1.2);-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);-ms-transform: scale(1.2);}
效果三:旋转放大 修改rotate(旋转度数) scale(放大值)
.img3 {transition: All 0.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out;-moz-transition: All 0.4s ease-in-out;-o-transition: All 0.4s ease-in-out;}.img3:hover {transform: rotate(360deg) scale(1.2);-webkit-transform: rotate(360deg) scale(1.2);-moz-transform: rotate(360deg) scale(1.2);-o-transform: rotate(360deg) scale(1.2);-ms-transform: rotate(360deg) scale(1.2);}
效果四:上下左右移动 修改translate(x轴,y轴)
.img4 {transition: All 0.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out;-moz-transition: All 0.4s ease-in-out;-o-transition: All 0.4s ease-in-out;}.img4:hover {transform: translate(0, -10px);-webkit-transform: translate(0, -10px);-moz-transform: translate(0, -10px);-o-transform: translate(0, -10px);-ms-transform: translate(0, -10px);}
