Tips: When you see this prompt, it means that the current article has been migrated from the original emlog blog system. The publishing time of the article is too long ago, and the formatting and content may not be complete. Please understand.
Simple CSS3 Avatar Rotation and 3D Rotation Effects
Date: 2017-7-10 Ajue CSS Views: 3896 times Comments: 2
Often, on some websites, you can see that when you hover over the avatar of a commenter, it rotates 360°.
First, let's take a look at the effect.
CSS part#
img{
height:300px;
border-radius:50%;
border:2px solid green;
/*Change rule*/
transition:all 2s;
}
img:hover{
/*
Action of change
Define 2D rotation, fill in the angle as the parameter
*/
transform:rotate(360deg);
}
HTML part (very simple, just one image)#
<img src="http://www.52ecy.cn/log0.png">
3D Rotation Effect (the front-end display style seems to conflict -.-)
CSS code#
div{
width:300px;
height:300px;
border:1px solid red;
/*If you want to see the 3D effect, you need to add a perspective attribute to the parent element of the moving element*/
perspective:300px;/*The distance between the 3D element and the view, generally the same as the height of the image for the best effect*/
}
img{
width:300px;
height:300px;
border:1px solid red;
/*Change rule*/
/*Set the origin position of the rotating element*/
transform-origin:bottom;
transition:all 2s;
}
img:hover{
/*Action of change*/
transform:rotateX(60deg);
}
The part of the HTML code is the same as the part of the avatar rotation, just put an image, so it is ignored here.
Because I directly inserted the effect image into the current page, it will conflict with the CSS style of the current page and destroy the entire page, so I modified the style selector of the effect image.
Note: It may not work in IE mode.
User Comments:
Railgun 丶 Infinity 4 years ago (2017-07-11)
Not possible, the animation effect is an HTML5 new feature, so it is definitely going to cause problems with that trash IE's support.
Ajue 4 years ago (2017-07-11)
@Railgun 丶 Infinity: Higher versions of IE should support it to some extent.