Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

CSS Rotate: Guide on How to Create Stunning Transform Effects

CSS is a great tool that provides many styling options to control the visual presentation of user interface (UI) elements/components on a webpage. The CSS rotate is one of many styling options that defines a transformation that spins an element around a fixed axis in a two-dimensional (2D) or three-dimensional (3D) space without the element changing shape. The behavior is like poking a hole in an object and spinning the object clockwise or anti-clockwise. This property comes in handy when handling UI elements like images, blocks of text, icons, etc.

This article elucidates a more intricate aspect of the rotate property, explores the different ways to rotate an element, and provides a glimpse into performing animations with the rotate property. So let’s dive right in.

But before we dive in, check out PureCode AI-generated custom components for CSS, if you’re working on a project that requires a lot of components. This way you can skip the tedious work of creating components yourself.

Understanding the CSS Rotate Property

The rotate property is one of four CSS transformation effects that spins an element and its child elements around a stationary point determined by the transform-origin. By default, an element’s origin is at the center (50% 50%) of its coordinate system. However, SVG elements differ in this aspect, as their origin is at 0 0 coordinate system of an SVG viewport, causing a rotation around the top left corner of the SVG canvas. Consider the following syntax, when rotating an element:

rotate: none | <angle> | [ x | y | z | <number>{3} ] && <angle>;

Specifying a <angle> value determines how much an element rotates clockwise or anti-clockwise. The direction of rotation is wholly dependent on the browser’s writing direction. In a context where information flows from the left to right, a positive value rotates an element clockwise, whereas a negative value rotates it counterclockwise. In a right-left orientation, a positive value rotates an element counterclockwise, and a negative value rotates it clockwise. The upcoming section will discuss the valid <angle> units used for an element rotation.

Supported Units for Rotating Elements

An element’s rotation depends on the <angle> value specified. Usually, people use the degree unit as the rotation value, but there are other valid units for rotation. The acceptable units for the angle of rotation of an element include the following:

  • Degrees

  • Radians

  • Gradians

  • Turns

Degrees

The degree unit is the most popular unit for rotating elements and its unit identifier is deg. A full circle is 360 degrees, therefore, it will take that same amount to complete a rotation.

.some-class {
   rotate: 45deg;
}

Radians

Radian or rad is an alternative unit for measuring rotation. It is the length of a circle’s diameter around the shape’s arc. A full circle is 2π radians, which is approximately 6.2832rad. Consider the following code example:

.some-class {
   rotate: 6.2831853rad;
}

From the description and example above, you may notice that the rad requires a lot of mathematical computation to achieve the desired result and, therefore, is not so friendly.

Gradians

Gradians abbreviated as grads, represent another angular unit of measurement where one gradian is equivalent to 1/400th of a full circle.

.some-class {
   rotate: 200grad;
}

Turns

This is another unit of measurement that is probably the most intuitive. A turn represents a complete rotation around the center of an element. Therefore, one turn is equivalent to 360deg.

.some-class {
   rotate: 1turn;
}

Rotating HTML Elements

In previous sections, we discussed how the rotate property provides a way to specify the extent and direction of rotation of an element about a fixed point. However, the browser applies the rotation property as soon as it parses the CSS and HTML markup without providing a visual cue. This section offers a stepwise process to visualize the rotation of an element using the rotate property. These steps are as follows:

  1. Create the HTML element you want to rotate. For this example, let’s create a rectangular element:

    HTML markup

    <!DOCTYPE html>
    <html lang="en">
      <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>Rotating an element</title>
        <link rel="stylesheet" href="styles.css" />
      </head>
      <body>
        <div class="rectangle"></div>
      </body>
    </html>

    CSS

    .rectangle {
      width: 150px;
      height: 75px;
      background-color: brown;
    }
  2. Specify an angle value of rotation to be applied to the CSS selector:

    .rectangle {
      width: 150px;
      height: 75px;
      background-color: brown;
      rotate: 90deg;
    }
  3. Apply transition to the element:

    .rectangle {
      /* include all the styles on step 2 */
      transition: rotate 0.3s ease-out;
    }
  4. Change the rotation angle of the HTML when hovering over it:

    .rectangle:hover {   rotate: 0deg; }

Other Methods for Rotating an Element in CSS

From the start of this article, we focused more on the rotate property, as it makes rotating elements convenient. However, CSS provides other means of applying rotation to a DOM element. These methods include the following:

  • Rotate function

  • CSS matrix function

Utilizing the Rotate Function

Similar to the rotate property, the rotate function rotates elements in a two-dimensional space based on the angle provided as an argument. The rotate function is applied as a value to the transform property and specifies the extent and direction of rotation in a 2D plane. The code example below shows how to use it:

selector {
   transform: rotate(30deg);
}

Leveraging the CSS Matrix Function

The matrix function is an alternative that applies a transformation to an element in the 2D space using the transform property. The matrix function provides a way to combine multiple transform functions into a single transformation explicitly. The syntax is as follows:

matrix( a, b, c, d, tx, ty )

Here is what the parameters above represent:

  • a, b, c, d: These parameters describe linear transformations such as scaling, rotation, skewing, etc.

  • tx: This parameter describes the linear translation on the x-axis.

  • ty: This parameter describes the linear translation on the y-axis.

The following example uses the CSS matrix function to achieve rotation of a DOM element:

<!DOCTYPE html>
<html lang="en">
  <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>Rotate elements with matrix</title>
    <style>
      
      .rectangle {
        transform-origin: 0 0;
        transform: matrix(0.707107, 0.707107, -0.707107, 0.707107, 150, 0);
        width: 120px;
        height: 60px;
        padding: 12px;
        background: limegreen;
        color: white;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <div class="rectangle">Rotated and moved with <code>matrix()</code>.</div>
  </body>
</html>
Creating a rotation with the matrix function

Whilst the matrix function allows us to create powerful transformations, it can be challenging to use. Hence, it is more convenient to use the individual transform functions or their shorthand versions. To better understand the matrix function watch the tutorial video below:

Comparing Different CSS Rotate Properties

Both the CSS rotate property and rotate function determine ways to rotate elements. However, they differ in how they are used to achieve an element rotation. The following table points out the main differences between these techniques:

Rotate propertyRotate function
It’s easy to use because you don’t need to follow a particular order when declaring it.It can be a bit challenging to use because it demands a particular order of declarations.
It has a more concise syntax.The syntax is longer.
The rotate property operates independently and does not impact the transformation matrix.The rotate function has a direct impact on the transformation matrix.

Correctly Rotating an Element with the Transform Property

The CSS transform property provides a way to apply the different transformations to an element. But sometimes, it produces unexpected results. This section discusses some of these scenarios and how to address them.

Applying other transform functions to HTML Elements

The ability of the CSS transform property to apply individual transformations to an element without causing its distortion or the reflow of DOM elements makes it a powerful styling tool. However, it gets complicated when combining more transform functions.

Irrespective of its declaration location, the order of application of the distinct transformation properties remains constant. However, the transform functions follow an order from left to right, and the browser applies the last transform function later. Consider the following example:

<!DOCTYPE html>
<html lang="en">
  <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>Applying different transform</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
      }

      .rectangle {
        width: 150px;
        height: 75px;
        background-color: brown;
        transform: rotate(90deg);
        transition: transform 0.3s ease-out;
      }

      .rectangle:hover {
        transform: translate(100px, 0) rotate(0deg);
      }
    </style>
  </head>
  <body>
    <div class="rectangle"></div>
  </body>
</html>

From the illustration above, the brown box attempted to move to the right first before rotating. As such the brown box appeared to rotate from the top left corner instead of the origin’s default value.

Utilizing the Rotate Function on SVG Elements

Just like HTML elements, SVG elements are subject to manipulation using transform functions. However, the rules guiding the transformation of HTML elements vary for SVG elements. By default, an SVG element’s origin is at the top left corner of its viewport. Declaring a rotate transformation causes it to appear to swing at that position.

<!DOCTYPE html>
<html lang="en">
  <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>Transforming SVG elements</title>
    <style>
      svg {
        border: 1px solid red;
      }

      .bar1 {
        transform: rotate(45deg);
      }

      .bar2 {
        transform: rotate(45deg) translateY(-45px);
      }
    </style>
  </head>
  <body>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      width="50"
      height="36"
      viewBox="0 0 50 36"
    >
      <rect class="bar1" width="50" height="3.57" fill="#121212" rx="1.79" />
      <rect
        class="bar2"
        width="50"
        height="3.57"
        y="32.29"
        fill="#121212"
        rx="1.79"
      />
    </svg>
  </body>
</html>
SVG element before transformation.
The result of transforming the SVG element

Drawing insights from the provided SVG example and illustration, the impact of transformations on SVG elements is apparent. Initially, the SVG lines were vertically aligned, forming a stack. Yet, upon applying the rotation effect to both lines, they seemingly converge to the same position. This alignment results from their rotation originating from the same coordinate system at 0 0. The impact becomes more pronounced when either element undergoes translation from its initial placement.

How to address the transform property aberration

From the examples above, the translation effect caused more harm than good. Because translation moves all the points of an element in the same direction, shifting the origin of the element coordinates system. Therefore, avoid using the rotate function with the translate function if you expect the element to rotate about the desired origin.

Furthermore, a noteworthy observation is the anomaly while rotating the SVG element, which underscores the nuanced behavior of SVG elements under transformation. Therefore, remove any translate effect and adjust the transform-origin value on each SVG element to your preference.

NB: When combining multiple transform functions in CSS, it’s crucial to be mindful of their order. This order can significantly affect the final result. Begin with either the translate or rotate functions based on the desired outcome, but exercise caution when combining both. Combining a rotate function with a translate function when attempting a rotation can produce unexpected results.

Determining When to Use These Properties

The rotate property provides a way to create stunning visuals for specific purposes. Knowing when to use it depends on the design and layout requirements. Here are some scenarios where it can be useful:

  • Enhancing user experience

  • Creating symmetry or patterns

  • Dynamic layout adjustments

Enhancing User Experience

Rotations can be used to enhance user interactions, especially in responsive design. For example, you can use the rotate property for rotating navigation menus or other UI components on smaller screens for a better user experience.

Creating Symmetry or Patterns

Rotations are employed to create symmetry or patterns within a design. They are relevant for decorative elements, icons, or graphics where rotational symmetry can add aesthetic value.

Dynamic Layout Adjustments

You can utilize the rotate property to dynamically adjust the layout of elements in response to user actions or other events. This effect can be beneficial in creating dynamic and interactive web interfaces.

Continuous Rotation of an Element

In a previous section, we discussed creating a visual cue while rotating an element with the transition property. This section explores how to continuously rotate an element with the animation property.

Creating a Basic Spinning Loader

Creating a spinning loader in CSS involves using the @keyframes rule to define a rotation from 0deg to 360deg. The code example below shows how to create a spinning loader:

<!DOCTYPE html>
<html lang="en">
  <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>A basic spinner</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
      }

      .spinner_container {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 10rem;
      }

      .spinner {
        width: 1.25em;
        height: 1.25em;
        border: 2px solid rgba(17, 20, 45, 0.4);
        border-radius: 50%;
        border-top-color: #fff;
        animation: spin 1s linear infinite;
        -moz-animation: spin 1s linear infinite;
        -webkit-animation: spin 1s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      @-webkit-keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="spinner_container">
      <div class="spinner"></div>
    </div>
  </body>
</html>

Combining the Rotate Property with Other Transform Functions for Complex Animations

Combining the rotate property with other transform functions in CSS allows for dynamic and visually interesting effects. Below is a code example to help you achieve an animated 3D cube:

<!DOCTYPE html>
<html lang="en">
  <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>A rotating 3D cube</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
          sans-serif;
      }

      .container {
        width: 400px;
        height: 400px;
        border: 2px solid #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 800px;
        -webkit-perspective: 800px;
        perspective-origin: top right;
        -webkit-perspective-origin: top right;
      }

      .cube {
        position: relative;
        width: 200px;
        height: 200px;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
      }

      .side {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.9;
        border: 2px solid #fff;
        -webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
      }

      .front {
        background-color: #e93e3e;
        transform: translateZ(100px);
        -webkit-transform: translateZ(100px);
      }

      .back {
        background-color: #32cde9;
        transform: translateZ(-100px);
        -webkit-transform: translateZ(-100px);
      }

      .left {
        background-color: #36dd52;
        transform: rotateY(90deg) translateZ(-100px);
        -webkit-transform: rotateY(90deg) translateZ(-100px);
      }

      .right {
        background-color: #3734e2;
        transform: rotateY(90deg) translateZ(100px);
        -webkit-transform: rotateY(90deg) translateZ(100px);
      }

      .top {
        background-color: #eb3ad3;
        transform: rotateX(90deg) translateZ(100px);
        -webkit-transform: rotateX(90deg) translateZ(100px);
      }

      .bottom {
        background-color: #e46b34;
        transform: rotateX(90deg) translateZ(-100px);
        -webkit-transform: rotateX(90deg) translateZ(-100px);
      }

      .container > .cube {
        animation: animate-cube 8s infinite linear;
        -webkit-animation: animate-cube 8s infinite linear;
      }

      @keyframes animate-cube {
        from {
          transform: rotateY(0) rotateX(720deg) rotateZ(0);
          -webkit-transform: rotateY(0) rotateX(720deg) rotateZ(0);
        }
        to {
          transform: rotateY(360deg) rotateX(0) rotateZ(360deg);
          -webkit-transform: rotateY(360deg) rotateX(0) rotateZ(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="cube">
        <div class="side front"></div>
        <div class="side back"></div>
        <div class="side left"></div>
        <div class="side right"></div>
        <div class="side top"></div>
        <div class="side bottom"></div>
      </div>
    </div>
  </body>
</html>

Final Thoughts

In this article, we discussed the CSS rotate property as an independent entity and as a function that is applied via the transform property. We also discussed ways to properly apply the rotation to achieve the desired effect.

When utilized under the right conditions, rotation in CSS can prove effective for creating visually appealing and interactive web components while maintaining optimization standards.

To enhance your web development projects, visit purecode.ai and unlock the full potential of CSS.

Additional Resources

If you enjoyed this article, consider reading other articles from our blog to improve your understanding of CSS:

Ofili Chukwuemeka Timothy

Ofili Chukwuemeka Timothy