经常会在一些网站看到评论区，评论人的头像当鼠标经过会360°旋转，其实很简单。
先看一下效果，注意：在IE模式下不生效
代码
<!-- css部分 -->
<style type="text/css">
.cs-css1 img{
height:300px;
border-radius:50%;
border:2px solid green;
/*变化规则*/
transition:all 2s;
}
.cs-css1 img:hover{
/*
变化动作
定义2d旋转，参数填写角度
*/
transform:rotate(360deg);
}
</style>
<!-- HTML部分(很简单，就一张图片) -->
<div class="cs-css1">
<img src="/upload/2020/20200702230239_8099.jpg">
</div>
另外一个效果：
代码如下：
<!-- 3D旋转效果 -->
<style type="text/css">
.cs-css2 {
width:300px;
height:300px;
border:1px solid red;
/*如果希望看到3d效果，需要在动的这个元素的父元素，增加一个perspective属性*/
perspective:300px;/*3D 元素距视图的距离，一般与图片的高一致效果最佳*/
}
.cs-css2 img{
width:300px;
height:300px;
border:1px solid red;
/*变化规则*/
/*设置旋转元素的原点位置*/
transform-origin:bottom;
transition:all 2s;
}
.cs-css2 img:hover{
/*变化动作*/
transform:rotateX(60deg);
}
</style>
<div class="cs-css2">
<img src="/upload/2020/20200702230239_8099.jpg">
</div>原文链接：https://www.qiquanji.com/post/9248.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知