1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

css设置头像旋转与3D旋转效果

经常会在一些网站看到评论区,评论人的头像当鼠标经过会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

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:高级教程 浏览: