How to set the mouse to slide over, rotate and zoom in css3-Front-end Q&A-php.cn

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

WBOY

Release： 2022-06-14 16:03:06

Original

1738 people have browsed it

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);}}".

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

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:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
div{
  width:100px;
  height:100px;
  background:pink;
  margin:0 auto;
animation:fadenum 5s;
}
@keyframes fadenum{
  100%{transform:rotate(180deg) scale(0.5,0.5);}
}
</style>
</head>
<body>
<div>这是一个旋转缩放的效果</div>
</body>
</html>

Copy after login

Output results:

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

(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!