css3 effect rotation

CSS3 Special Effects Rotation

In web design, dynamic special effects can increase the interactivity and artistry of the web page, allowing users to browse the web more happily. Among them, the rotation effect is a relatively common special effect. In CSS3, rotation effects can be achieved through the transform attribute.

1. Use transform to achieve rotation

The transform attribute in CSS3 is used to achieve element deformation effects, such as rotation, movement, scaling, etc. When realizing the element rotation effect, you can use the rotate rotation function. The specific syntax is as follows:

transform: rotate (rotation angle);

The rotation angle is in degrees, which can be a positive or negative number. or 0.

2. Achieve image rotation effect

1. Basic rotation effect

The following is a simple example, you can achieve the image rotation effect by hovering the mouse over the image. The CSS code is as follows:

.rotate-img{
transition: transform 0.5s ease;
}
.rotate-img:hover{
transform: rotate(360deg);
}

In this code, the transition attribute is used to achieve the animation transition effect, where transform represents the transition attribute, 0.5s represents the transition time, and ease represents the transition method. In the :hover pseudo-class, use the transform:rotate function to achieve the rotation effect, where the rotation angle is 360 degrees.

2. Rotation with scaling effect

In the basic rotation effect above, you can achieve rotation effects at different angles by changing the rotation angle parameters. At the same time, we can also combine the zoom effect to achieve a cooler rotation effect. Here is a sample code:

.rotate-img{
transition: transform 0.5s ease;
}
.rotate-img:hover{
transform: rotate(360deg) scale(1.5);
}

In this code, transform:rotate(360deg) scale(1.5) means that during the rotation, there will also be a 1.5 times magnification and reduction effect. Of course, the zoom factor and other animation effects can be adjusted yourself.

3. Realize the rotation effect of the navigation menu

In addition to realizing the rotation effect on the picture, the rotation effect can also be realized on the navigation menu and other elements. Here is a sample code:

.rotate-menu{
display: flex;
justify-content: center;
}
.rotate-menu li{
position : relative;
margin: 0 1em;
transition: transform 0.5s ease;
}
.rotate-menu li a{
display: block;
padding: 10px 20px;
}
.rotate-menu li:hover{
transform: rotate(360deg);
}
.rotate-menu li:hover a{
text-shadow: 0px 0px 2px #fff;
}

In this code, the li element is added to the navigation menu, the position attribute is set to the li element, and the rotation effect is triggered through the :hover pseudo-class. At the same time, add text-shadow style to the menu text to achieve a more three-dimensional effect.

Summary

In CSS3, using the transform attribute can easily achieve the rotation effect of elements, and it can also be combined with scaling, movement and other effects to achieve cooler dynamic effects. In web design, proper use of rotation effects can increase user experience and web page artistry, but be careful not to overuse it to avoid affecting web page speed.

The above is the detailed content of css3 effect rotation. For more information, please follow other related articles on the PHP Chinese website!