How css makes the mouse slide over the picture to rotate
Editor to share with you how css let the mouse over the picture rotation, I hope you have something to gain after reading this article, let's discuss it together!
In css, you can use the ": hover" pseudo-class selector and the transform attribute to rotate the mouse over the picture. The syntax is "picture element: hover {transform:rotateZ;}".
The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.
In css, you can rotate the div element through the transform attribute, which applies a 2D or 3D transformation to the element. This attribute allows us to rotate, scale, move, or tilt the element.
The numbers in the table indicate the first browser version that fully supports this property.
A number with-webkit-,-moz-, or-ms- indicates the first version that uses the prefix.
Let's take a look at how the mouse is over and the picture is rotated through an example. the example is as follows:
Body {background:#ddd;}. Keleyi {width: 220pxposition height: 220px ease-out; margin: 0 auto;background: no-repeat url ("1013.01.png") left top;-webkit-background-size: 220px 220pxtera left top;-webkit-background-size: 220px 220pxTech Webkit: rotateZ (360deg); transform: rotateZ (360deg);} keleyi:hover {- webkit-transform: rotateZ (360deg); transform: rotateZ (360deg
The chrome browser is used in the above example, so the-webkit- prefix is used.
Output result:
When the mouse is over, the rotation occurs:
After reading this article, I believe you have a certain understanding of "how css makes the mouse slide over the picture rotation". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for your reading!
