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

Tips：当你看到这个提示的时候，说明当前的文章是由原emlog博客系统搬迁至此的，文章发布时间已过于久远，编排和内容不一定完整，还请谅解`

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

日期：2017-7-10 阿珏 css 浏览：3896次 评论：2条

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

先看一下效果

.tximg { height: 300px; border-radius: 50%; border: 2px solid rgba(0, 128, 0, 1); transition: all 2s }
.tximg:hover { transform: rotate(360deg) }

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旋转效果(前台显示样式好像还是冲突了-。-)

.div { width: 300px; height: 300px; border: 1px solid rgba(255, 0, 0, 1); perspective: 300px }
.img { width: 300px; height: 300px; border: 1px solid rgba(255, 0, 0, 1); transform-origin: bottom; transition: all 2s }
.img:hover { transform: rotateX(60deg) }

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模式下可能不生效

网友评论：

Railgun丶无限 4年前 (2017-07-11)

不是可能，动画效果是h5新特性，ie那渣逼的支持肯定是会出事的

阿珏 4年前 (2017-07-11)

@Railgun丶无限：高版本的ie不是应该多多少少支持那么一点么