赣州建站资讯网

为消费者提供更优质的体验

CSS3动画(360度旋转、旋转放大、放大、移动)

     /*效果一:360°旋转 修改rotate(旋转度数)*/

        .img1:hover {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
        }

        /*效果二:放大 修改scale(放大的值)*/


        .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: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: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);
        }


- END -
声明:文字图片等素材除标明原创外均来源于网络,如有侵权,请及时告知我们,我们将在最短的时间内删除!

相关推荐

微信公众平台:圆狐创意

关注圆狐创意微信公众平台浏览最新资讯

更多媒体及商务合作

QQ:295939675   或  至电:198-6662-0460