CSS transition effect: how to achieve the rotation and scaling effect of elements

CSS transition effect: How to achieve the rotation and scaling effect of elements requires specific code examples

In web interface design, transition effect is a very important design element , which can inject some vitality and movement into static pages. Among them, the rotation and scaling effect is a common effect, which can make page elements more vivid and interesting during interaction. This article will introduce how to use CSS to achieve rotation and scaling effects, and provide specific code implementation.

1. Achieving the rotation effect

To achieve the rotation effect of the element, you need to use the transform attribute in CSS3. You can realize the rotation of the element through the rotate() function in the transform attribute. This function requires one parameter, which represents the angle of rotation, which can be a positive or negative number. When the parameter is a positive number, it means that the element rotates in the clockwise direction; when the parameter is a negative number, it means that the element rotates in the counterclockwise direction.

Next, let’s demonstrate how to achieve the rotation effect of a square element. First, we create a square div element and set some basic styles:

<div class="square"></div>

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

Next, we add the code for the rotation effect in CSS:

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    transform: rotate(45deg);
    transition: transform 1s ease;
}

In the above code, we The transform attribute and transition attribute are used to achieve the rotation effect of the element. Among them, the value of the transform attribute is rotate(45deg), which means that the element is rotated 45 degrees in the clockwise direction; the value of the transition attribute is transform 1s ease, which means that the transform attribute value of the element is transitioned at the speed of ease within 1 second. In this way, when we operate the element during interaction, we can see the rotation effect of the element.

2. Achieving the scaling effect

To achieve the scaling effect of the element, you also need to use the transform attribute. The difference is that we need to use the scale() function of the transform attribute to achieve the element's scaling effect. Zoom. The scale() function requires two parameters, which represent the horizontal scaling and vertical scaling of the element. When the parameter is 1, it means that the element maintains its original size; when the parameter is greater than 1, it means that the element is enlarged; when the parameter is less than 1, it means that the element is reduced.

Next, let’s demonstrate how to achieve the scaling effect of a square element. Different from the rotation effect, we need to add a hover state to the element before interaction, so that when the user moves the mouse over the element, the element will have a scaling effect. We first create a square div element and set some basic styles:

<div class="square"></div>

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

Then, we add the code for the zoom effect in CSS:

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    transition: transform 1s ease;
}

.square:hover {
    transform: scale(1.2);
}

In the above code, we use transition attribute and hover state to achieve the scaling effect of elements. In the original state, the element's transform attribute value is none and no scaling is performed; when the user moves the mouse over the element, we use the hover state to trigger the element's scaling effect and set the value of the transform attribute to scale(1.2). Indicates that the element is magnified 1.2 times. At the same time, we also use the transition attribute to animate the element during transition.

3. Comprehensive implementation of rotation and scaling effects

If we want to achieve the rotation and scaling effects of elements at the same time, they can be used together. In the transform attribute, we can use multiple functions to perform multiple transformations at the same time, and we can also use the transition attribute to add animation effects to the transformation.

Next, let’s demonstrate how to implement the rotation and scaling animation effect of a square element. We first create a square div element and set some basic styles:

<div class="square"></div>

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

Then, we add the rotation and scaling animation code in CSS:

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    transform: rotate(0deg) scale(1);
    transition: transform 1s ease;
}

.square:hover {
    transform: rotate(45deg) scale(1.2);
}

In the above code, we use The transform attribute and transition attribute are used to achieve the rotation and scaling animation effect of the element. In the original state, the transform attribute value of the element is rotate(0deg) scale(1), which means that the element does not perform rotation and scaling operations; when the user moves the mouse to the element, we use the hover state to trigger the animation effect of the element. The value of the transform attribute is set to rotate(45deg) scale(1.2), which means that the element is rotated 45 degrees clockwise and enlarged 1.2 times while having a slow animation effect.

Summary

Through the above demonstration, we can see that it is very simple to achieve the rotation and scaling effect of elements. It only needs to use the transform attribute and transition attribute in CSS3 to achieve it. We only need to use the rotate() function and scale() function to achieve rotation and scaling effects, and then use the transition attribute to add a smooth transition effect to the animation. At the same time, in practical applications, we can combine different transformation functions to create more complex effects.

The above is the detailed content of CSS transition effect: how to achieve the rotation and scaling effect of elements. For more information, please follow other related articles on the PHP Chinese website!