banner
阿珏酱

阿珏酱

いつもとは逆の電車に乗り、見たこともない風景を見に行く
twitter
github
facebook
bilibili
zhihu
steam_profiles
youtube

Simple CSS3 avatar rotation and 3D rotation effect

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.

image

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 -.-)

image

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:

image 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.

image Ajue 4 years ago (2017-07-11)
@Railgun 丶 Infinity: Higher versions of IE should support it to some extent.

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.