search
HomeWeb Front-endCSS TutorialCSS transformation: how to achieve the rotation effect of elements

CSS transformation: how to achieve the rotation effect of elements

Nov 21, 2023 pm 06:36 PM
elementdeformationcssrotate

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/imghwm/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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Flexbox vs Grid: should I learn them both?Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricks@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingCSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsModern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

Revisiting Image MapsRevisiting Image MapsMay 07, 2025 am 09:40 AM

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.

State of Devs: A Survey for Every DeveloperState of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AM

The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more. 

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use