rotateX() | CSS-Tips

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

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

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

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

The rotateX() operate is outlined within the CSS Transforms Module Degree 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() operate takes a single  argument, which defines how a lot the component is rotated round its vertical axis.

• : values like 45deg, 0.5turn, -90deg, 1.57rad, and so forth. will be handed.
• A optimistic angle tilts the highest of the component towards the again and the underside towards the entrance.
• Whereas a detrimental angle does in any other case: it tilts the component’s high in direction of you, and its backside away from you.

The  kind will be considered one of 4 models:

• 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.

Establishing 3D transforms

rotateX() is a part of the CSS 3D rework features, so it’s higher represented in a 3D view. For rotateX() to supply a visual 3D impact, it’s worthwhile to set the perspective property on the mum or dad component. The attitude property determines how the component is projected, including depth to the component and making it look pure and 3D.

On this demo, now we have two sliders to manage the rotateX() diploma and perspective property.

Within the absence of perspective, the component appears oddly skewed and ugly.

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

Fundamental utilization

Probably the most fashionable 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 method 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 mum or dad components.

.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  transform-style: preserve-3d;
  transition: rework 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 {
  rework: rotateX(180deg);
}

And, lastly, we flip the cardboard when the mum or dad is :hover-ed:

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

Instance: 3D Loading spinner

We will additionally create participating loading indicators with the rotateX() operate..

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

As soon as once more, we give the component’s mum or dad a perspective:

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

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

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

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

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

The order by which the rework features are outlined is essential. The impact of the primary operate involves life earlier than the second, so at 25% the component 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 will improve conventional accordions by including a refined rotateX() rotation when objects develop or collapse, making a extra staggered fall impact that additional engages the consumer and improves the expertise, fairly than the straightforward slide-down-and-back-up animation.

As soon as once more, as traditional, we set the attitude on the mum or dad

.accordion-item {
  perspective: 1000px;
}

Then, we outline the rework and transform-origin. Since we would like the .accordion-content to fall towards the consumer, we use a detrimental 90° angle to shift the component out of the consumer’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;
  rework: rotateX(-90deg);
  overflow: hidden;
  transition:
    rework 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 seem like a door opening downward, whereas rotateX(-90deg) makes the content material seem to unfold into view.

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

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

A notice about transform-origin and rotateX()

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

.youngster {
  rework: rotateX(120deg);
  transform-origin: high heart;
}

Specification

The CSS rotateX() operate is outlined within the CSS Transforms Module Degree 2 draft.

Browser Help

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

Associated