CSS transformation: how to achieve the rotation effect of elements

CSS transformation: How to achieve the rotation effect of elements, specific code examples are required

In web design, animation effects are important to improve user experience and attract user attention One of the methods, and rotation animation is one of the more classic ones. In CSS, you can use the "transform" attribute to achieve various deformation effects of elements, including rotation. This article will introduce in detail how to use CSS "transform" to achieve the rotation effect of elements, and provide specific code examples.

1. How to use CSS’s “transform” to achieve the rotation effect of elements

The “transform” attribute of CSS is the core API for rotation, movement, scaling, tilting and other deformation effects of elements. It Can act on a single element or a group of elements. To achieve the rotation effect of an element, just set the value of the "transform" attribute to "rotate (angle value)", where the "angle value" is a value in degrees, which can be a positive number, a negative number, or a decimal. . For a rotated element, its center of rotation defaults to the center point of the element.

The following is the syntax format of the "transform" attribute:

transform: none|transform-functions;

Among them, "none" means no transformation, and "transform-functions" is a combination of various specific transformation functions form. For the rotation effect, we only need to use the "rotate()" transformation function.

The following is the specific code implementation:

.rotate {
  transform: rotate(30deg); /* 旋转30度 */
}

In the above example, ".rotate" is a CSS class name, which can be applied to all elements in the HTML document that require rotation effects. Here the element is rotated 30 degrees.

In addition to using the "rotate()" function to achieve the rotation effect independently, we can also use it in combination with other deformation functions to achieve more complex effects. For example, the following code rotates an element 30 degrees and scales it at the same time:

.rotate-scale {
  transform: rotate(30deg) scale(1.5);
}

2. Specific code examples

The following are some specific code examples to allow readers to better understand how to use CSS "transform" implements the rotation effect of elements.

Example 1: Basic rotation

HTML code:

<div class="rotate-box">
  <img src="/static/imghw/default1.png"  data-src="img/logo.png"  class="lazy" alt="">
</div>

CSS code:

.rotate-box {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(30deg);
}

In this example, we define a "rotate-box ” class, which contains a 200 × 200 pixel container and an image. By setting the "justify-content" and "align-items" properties, we center the image. Then, use the "transform" property to rotate the container 30 degrees.

Example 2: Rotation of multiple graphics

HTML code:

<div class="rotate-container">
  <div class="rotate-box box-1"></div>
  <div class="rotate-box box-2"></div>
  <div class="rotate-box box-3"></div>
</div>

CSS code:

.rotate-container {
  width: 500px;
  height: 500px;
  position: relative;
  margin: 0 auto;
}

.rotate-box {
  width: 100px;
  height: 100px;
  background-color: #009688;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
}

.box-1 {
  transform: rotate(45deg);
}

.box-2 {
  transform: rotate(135deg);
}

.box-3 {
  transform: rotate(225deg);
}

In this example, we define a "rotate -container" container, and then three different rotation graphics are defined within the container. By setting the "position" property, these graphics can overlap each other, and the "transform-origin" property can make the rotation center of the graphics at the exact center of the graphics. Finally, by setting different "transform" attributes of each graphic respectively, the effect of rotating at different angles is achieved.

Example 3: Infinite rotation animation

HTML code:

<div class="rotate-box"></div>

CSS code:

.rotate-box {
  width: 100px;
  height: 100px;
  background-color: #3f51b5;
  animation-name: rotate-animation;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotate-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

In this example, we use CSS animation properties to achieve infinite Rotation effect. We define an element called "rotate-box" and set the animation's keyword (such as "animation-name") to the "rotate-animation" type. Then, different states during the animation process are defined through the "@keyframes" rule, including changes in rotation angle from 0 degrees to 360 degrees.

Through the above three code examples, readers can master different methods of using the "transform" attribute of CSS to achieve rotation effects. In actual development, these methods can be flexibly combined and adjusted according to the specific needs of the project.

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