How to realize the counterclockwise rotation of mouse hovering elements by css

Editor to share with you how to achieve the css mouse hover element counterclockwise rotation effect, I believe that most people do not understand, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

In css, you can use the ": hover" pseudo-class selector and the transform attribute to rotate the rollover element counterclockwise, with the syntax "element: hover {transform:rotateZ;}".

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

In css, you can use the ": hover" pseudo-class selector and the transform attribute to rotate the mouse over the picture counterclockwise. The transform attribute applies a 2D or 3D transformation to the element. This attribute allows us to rotate, scale, move, or tilt the element.

Let's take a look at it through an example, which is as follows:

.keleyi {width: 220pxscape height: 220pxpolitics margin: 0 auto;background: no-repeat url ("1118.02.png") left top;-webkit-background-size: 220px 220pxmith backgroundmuri size: 220px 220pxmit.keleyi {- webkit-transform: rotateZ (- 360deg); transform: rotateZ (- 360deg)

Output result:

These are all the contents of the article "how to achieve the counterclockwise rotation of mouse hovering elements in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!