rotateX() | CSS-Methods

The CSS rotateX() perform rotates a component across the x-axis in a three-dimensional area. Particularly, it vertically flips the aspect, making it tilt backward or ahead, relying on the angle set. It’s considered one of many remodel capabilities used within the remodel property.

The x-axis is the axis of rotation, so the aspect turns vertically. Think about a pin is caught to the left aspect of a component and it will possibly solely flip up or down.

Within the demo beneath, rotateX(0) is given because the aspect’s default rotation:

.demo-element {
  remodel: rotateY(var(--deg));
  transition: remodel 0.3s ease;
}

The rotateX() perform is outlined within the CSS Transforms Module Stage 2 specification.

Syntax

rotateX() = rotateX( [  |  ] )

Arguments

/* angle in levels */
rotateX(45deg) /* rotates 45 levels backwards */
rotateX(-90deg) /* rotates 90 levels forwards */

/* angle in turns */
rotateX(0.5turn) /* rotates 180 levels (half a full flip) */
rotateX(1turn)   /* Rotates a full 360-degree flip */

/* angle in radians */
rotateX(1.57rad) /* Roughly 90 levels */

/* angle in gradians */
rotate(200grad)  /* rotates 180 levels */

The rotateX() perform takes a single  argument, which defines how a lot the aspect is rotated round its vertical axis.

• : values like 45deg, 0.5turn, -90deg, 1.57rad, and many others. could be handed.
• A constructive angle tilts the highest of the aspect towards the again and the underside towards the entrance.
• Whereas a adverse angle does in any other case: it tilts the aspect’s high in the direction of you, and its backside away from you.

The  sort could be considered one of 4 items:

• deg: One diploma is 1/360 of a full circle.
• grad: One gradian is 1/400 of a full circle.
• rad: A radian is the size of a circle’s diameter across the form’s arc. One radian is 180deg, or 1/2 of a full circle. One full circle is 2π radians, which is the same as 6.2832rad or 360deg.
• flip: One flip is one full circle. So, midway round a circle is the same as .5turn, or 180deg.

Organising 3D transforms

rotateX() is a part of the CSS 3D remodel capabilities, so it’s higher represented in a 3D view. For rotateX() to supply a visual 3D impact, it is advisable to set the perspective property on the father or mother aspect. The angle property determines how the aspect is projected, including depth to the aspect and making it look pure and 3D.

On this demo, we’ve got two sliders to regulate the rotateX() diploma and perspective property.

Within the absence of perspective, the aspect appears to be like oddly skewed and ugly.

It’s additionally value setting transform-style to preserve-3d, which determines if that aspect’s youngsters are positioned in 3D area or flattened.

Primary utilization

One of the vital common makes use of of rotateX() is creating flip playing cards that reveal content material on the again when clicked or hovered. You need to use this system for pricing tables, profile playing cards, or interactive galleries.

To set the stage and provides the cardboard a projection worth and 3D presence, we set the perspective and preserve-3d kinds on the father or mother parts.

.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  transform-style: preserve-3d;
  transition: remodel 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

Then we place the back and front faces of the cardboard completely inside the container whereas setting backface-visibility to hidden:

.flip-card-front,
.flip-card-back {
  place: absolute;
  backface-visibility: hidden;
}

Subsequent, we pre-rotate the again face by 180 levels, so it is able to be revealed when the cardboard flips

.flip-card-back {
  remodel: rotateX(180deg);
}

And, lastly, we flip the cardboard when the father or mother is :hover-ed:

.flip-card:hover .flip-card-inner {
  remodel: rotateX(180deg);
}

Instance: 3D Loading spinner

We are able to additionally create partaking loading indicators with the rotateX() perform..

On this instance, we’re not solely utilizing the rotateX() perform, however we’re combining it with the rotateY() perform for a two-axis rotation animation. By constantly rotating a component horizontally and vertically, we create a 3D spinning impact.

As soon as once more, we give the aspect’s father or mother a perspective:

.spinner-wrapper {
  perspective: 1000px;
  margin-bottom: 2rem;
}

Then, we apply the animation to the aspect utilizing the CSS animation shorthand property.

.spinner {
  width: 80px;
  top: 80px;
  animation: spin-3d 2s ease-in-out infinite;
}

Subsequent, we outline the keyframe, which dictates how the aspect rotates from one level to a different.

@keyframes spin-3d {
  0% {
    remodel: rotateX(0deg) rotateY(0deg);
  }
  25% {
    remodel: rotateX(180deg) rotateY(90deg);
  }
  50% {
    remodel: rotateX(180deg) rotateY(180deg);
  }
  75% {
    remodel: rotateX(360deg) rotateY(270deg);
  }
  100% {
    remodel: rotateX(360deg) rotateY(360deg);
  }
}

The order during which the remodel capabilities are outlined is vital. The impact of the primary perform involves life earlier than the second, so at 25% the aspect flips midway horizontally earlier than the vertical flip, and the animation is so clean you hardly discover it.

Instance: 3D accordion

Let’s skip the boring accordion element content material reveal animation and make ours a bit fascinating.

We are able to improve conventional accordions by including a delicate rotateX() rotation when gadgets develop or collapse, making a extra staggered fall impact that additional engages the person and improves the expertise, moderately than the straightforward slide-down-and-back-up animation.

As soon as once more, as common, we set the attitude on the father or mother

.accordion-item {
  perspective: 1000px;
}

Then, we outline the remodel and transform-origin. Since we wish the .accordion-content to fall towards the person, we use a adverse 90° angle to shift the aspect out of the person’s view.

Additionally, we will change the default rotation axis from the middle to the highest utilizing transfom-origin: high;

.accordion-content {
  transform-origin: high;
  remodel: rotateX(-90deg);
  overflow: hidden;
  transition:
    remodel 0.4s ease,
    opacity 0.3s ease,
    max-height 0.4s ease;
}

The transform-origin:high ensures the rotation happens from the highest edge, making it appear like a door opening downward, whereas rotateX(-90deg) makes the content material seem to unfold into view.

Because the accordion opens, the .accordion-content aspect falls in a staggered method to 0 levels, which is the default place.

.accordion-item.open .accordion-content {
  remodel: rotateX(0deg);
  opacity: 1;
  max-height: 500px;
}

A be aware about transform-origin and rotateX()

By default, the rotateX() perform rotates a component round its heart. Nonetheless, you’ll be able to change this rotation axis utilizing the CSS transform-origin property. transform-origin helps you to change the purpose of origin of any remodel perform, so moderately than being restricted to heart, you should use high heart, high proper, backside left, and even percentages and lengths.

.baby {
  remodel: rotateX(120deg);
  transform-origin: high heart;
}

Specification

The CSS rotateX() perform is outlined within the CSS Transforms Module Stage 2 draft.

Browser Assist

The rotateX() perform has baseline help on all trendy browsers.

Associated