效果一:360°旋转 修改rotate(旋转度数)
1 2 3 4 5 6 7 8 9 10 11 12 13 | .img 1 { transition: All 0.4 s ease-in-out; -webkit-transition: All 0.4 s ease-in-out; -moz-transition: All 0.4 s ease-in-out; -o-transition: All 0.4 s ease-in-out; } .img 1: hover { transform: rotate( 360 deg); -webkit-transform: rotate( 360 deg); -moz-transform: rotate( 360 deg); -o-transform: rotate( 360 deg); -ms-transform: rotate( 360 deg); } |
效果二:放大 修改scale(放大的值)
1 2 3 4 5 6 7 8 9 10 11 12 13 | .img 2 { transition: All 0.4 s ease-in-out; -webkit-transition: All 0.4 s ease-in-out; -moz-transition: All 0.4 s ease-in-out; -o-transition: All 0.4 s ease-in-out; } .img 2: 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(放大值)
1 2 3 4 5 6 7 8 9 10 11 12 13 | .img 3 { transition: All 0.4 s ease-in-out; -webkit-transition: All 0.4 s ease-in-out; -moz-transition: All 0.4 s ease-in-out; -o-transition: All 0.4 s ease-in-out; } .img 3: hover { transform: rotate( 360 deg) scale( 1.2 ); -webkit-transform: rotate( 360 deg) scale( 1.2 ); -moz-transform: rotate( 360 deg) scale( 1.2 ); -o-transform: rotate( 360 deg) scale( 1.2 ); -ms-transform: rotate( 360 deg) scale( 1.2 ); } |
效果四:上下左右移动 修改translate(x轴,y轴)
1 2 3 4 5 6 7 8 9 10 11 12 13 | .img 4 { transition: All 0.4 s ease-in-out; -webkit-transition: All 0.4 s ease-in-out; -moz-transition: All 0.4 s ease-in-out; -o-transition: All 0.4 s ease-in-out; } .img 4: 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 ); } |