经常会在一些网站看到评论区，评论人的头像当鼠标经过会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模式下可能不生效
不是可能，动画效果是h5新特性，ie那渣逼的支持肯定是会出事的
@ Railgun丶无限 @Railgun丶无限：高版本的ie不是应该多多少少支持那么一点么