Home > Article > Web Front-end > How to set the mouse to slide over, rotate and zoom in css3
How to set the mouse to slide over, rotate and zoom in css3
- WBOYOriginal
- 2022-06-14 16:03:061810browse
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:
<!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>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!