简单的css3头像旋转与3D旋转效果

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

先看一下效果



css部分

img{
	height:300px;
	border-radius:50%;
	border:2px solid green;
	/*变化规则*/
	transition:all 2s;
}

img:hover{
	/*
		变化动作
		定义2d旋转,参数填写角度
	*/
	transform:rotate(360deg);
}


HTML部分(很简单,就一张图片)

<img src="http://www.52ecy.cn/log0.png">



3D旋转效果(前台显示样式好像还是冲突了-。-)


CSS代码

div{
	width:300px;
	height:300px;
	border:1px solid red;
	/*如果希望看到3d效果,需要在动的这个元素的父元素,增加一个perspective属性*/
	perspective:300px;/*3D 元素距视图的距离,一般与图片的高一致效果最佳*/
}
img{
	width:300px;
	height:300px;
	border:1px solid red;
	/*变化规则*/
	/*设置旋转元素的原点位置*/
	transform-origin:bottom;
	transition:all 2s;
}

img:hover{
	/*变化动作*/
	transform:rotateX(60deg);
	
}


HTML代码的部分和头像旋转部分的一模一样,只需放一张图片即可,此处忽略。


因我是直接将效果图插入当前页面,会导致与当前页面的css样式发生冲突,毁掉整个页面,固修改了效果图的样式选择器

注意:在IE模式下可能不生效

本博客所有文章如无特别注明均为原创。作者:阿珏复制或转载请以超链接形式注明转自 阿珏博客
原文地址《简单的css3头像旋转与3D旋转效果

相关推荐

发表评论

路人甲 OωO表情
Ctrl+Enter快速提交

网友评论(2)

不是可能,动画效果是h5新特性,ie那渣逼的支持肯定是会出事的
Railgun丶无限 2年前 (2017-07-11) 回复
@Railgun丶无限:高版本的ie不是应该多多少少支持那么一点么
阿珏 2年前 (2017-07-11) 回复