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

弃笔从戎 弃笔从戎

发表文章数:163

首页 » 干货教程 » 正文

经常会在一些网站看到评论区,评论人的头像当鼠标经过会360°旋转,其实很简单。

代码

<!-- 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>

 

未经允许不得转载:作者:弃笔从戎, 转载或复制请以 超链接形式 并注明出处 IP索引
原文地址:《干货:css设置头像旋转与3D旋转效果》 发布于2020-07-20

分享到:
赞(0)

评论 抢沙发

2 + 6 =


长按图片转发给朋友

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

切换登录

注册