没有逼哥的第9天

MENU

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

2018 年 02 月 10 日 • 未分类阅读设置

图片圆形代码

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
}
无标签