How to set the mouse to slide over, rotate and zoom in css3

Method: 1. Use the "element {animation: name time}" statement to bind the rotation and magnification animation to the element; 2. Use "@keyframes" to specify the keyframes for rotation and magnification. The syntax is "@keyframes name { 100%{transform:rotate(rotation angle) scale(horizontal enlargement ratio, vertical enlargement ratio);}}".

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

How to set the mouse to slide over the rotation and magnify in css3

In css, you can use the animation attribute to bind the rotation and magnification animation effect to the element.

Use the @keyframes rule to set the animation action keyframes of the element, use the transform attribute with the rotate() function to set the element rotation action, and use the transform attribute with the scale() function to set the element scaling action.

Examples are as follows:

        
  
这是一个旋转缩放的效果
  

Output results:

(Learning video sharing:css video tutorial,html video tutorial)

The above is the detailed content of How to set the mouse to slide over, rotate and zoom in css3. For more information, please follow other related articles on the PHP Chinese website!