笔记-CSS实现图片变圆并做到触碰360°旋转

February 10, 2018

 未分类

    图片圆形代码

    width:500px; height:500px; border-radius:100%; overflow:hidden;
    

    旋转代码

    img{
        -webkit-transition: 0.4s;
        -webkit-transition: -webkit-transform 0.4s ease-out;
        transition: transform 0.4s ease-out;
        -moz-transition: -moz-transform 0.4s ease-out;
    }
      
    img:hover{
        transform: rotateZ(360deg);
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
    }
    

    结合

    img{
        -webkit-transition: 0.4s;
        -webkit-transition: -webkit-transform 0.4s ease-out;
        transition: transform 0.4s ease-out;
        -moz-transition: -moz-transform 0.4s ease-out;
    }
      
    img:hover{
        transform: rotateZ(360deg);
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
    }
                img {
        width:120px;
        height:120px;
        border-radius:100%;
         overflow:hidden
    }