rotateY() | CSS-Tips

The CSS rotateY() operate rotates a component round its vertical y-axis. Particularly, it horizontally flips a component from left to proper (or proper to left for that matter). It’s one in all many remodel features used together with the remodel property.

The y-axis is the axis of rotation, so the ingredient turns horizontally. Think about a pin is caught to the highest of a component and it may possibly solely rotate left or proper.

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

The rotateY() operate is outlined within the CSS Transforms Module Stage 2 specification.

Syntax

rotateY() = rotateY( [  |  ] )

Arguments

/*  in levels */
rotateY(90deg)   /* Ingredient rotates 90 levels to the proper */
rotateY(-180deg) /* Ingredient rotates 180 levels to the left */

/*  in turns */
rotateY(0.5turn) /* Ingredient rotates 180 levels (half a full rotation) */
rotateY(1turn)   /* Ingredient completes a full 360-degree rotation */

/*  in radians */
rotateY(1.57rad) /* Roughly 90 levels to the proper */
rotateY(-3.14rad) /* Roughly 180 levels to the left */

The rotateY() operate takes a single  argument, which defines how a lot the ingredient is rotated round its vertical axis.

• : Values like 45deg, 0.5turn, -90deg, 1.57rad, and so on. When it’s a constructive angle, the proper fringe of the ingredient rotates away from you (the ingredient seems to rotate to the proper). When the angle is a destructive worth, the left edge rotates and the ingredient seems to rotate to the left.

The  sort has 4 models to select from:

• 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

We’ve gotta discuss this primary as a result of, for any 3D remodel operate to create a visual 3D impact, it’s important to set the perspective property on the mum or dad ingredient. perspective defines the projection of the 3D ingredient from the viewer’s eyes.

Decrease values (like 400px) make the 3D ingredient seem nearer, whereas larger values (like 2000px) make it seem farther, decreasing the visibility of the 3D impact.

.mum or dad {
  perspective: 1000px;
}

.card {
  remodel: rotateY(45deg);
}

With out perspective, the rotation will seem flat and shrunken, and the 3D depth received’t be seen.

Whereas with perspective, it seems barely tilted to the proper

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

Primary utilization

One of the crucial widespread makes use of of rotateY() is creating horizontal flip playing cards that present content material on the again when clicked or hovered. To make one, we first set the 3D stage and projection by making use of transform-style to preserve-3d; to the cardboard and perspective to 1000px; types to the mum or dad components.

.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);
}

Subsequent, we place the back and front faces of the cardboard completely inside the container, whereas setting backface-visibility to hidden. It prevents the content material of every face from exhibiting via when rotated to the opposite aspect.

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

We additionally must pre-rotate the again face by 180deg. This ensures the again face is readable when flipped and considered from the entrance.

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

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

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

Instance: Picture carousel

The rotateY() operate can also be good for creating 3D picture carousels that showcase merchandise or galleries. Every merchandise might be positioned round a cylinder and rotated to point out the viewer.

As soon as once more, as ordinary, we arrange the 3D stage with perspective and preserve-3d.

.carousel {
  perspective: 1200px;
}

.carousel-container {
  transform-style: preserve-3d;
  transition: remodel 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

Afterwards, we attempt to place all .carousel-item within the heart of the .carousel-container utilizing absolute positioning

.carousel-item {
  place: absolute;
  left: 50%;
  high: 50%;
  remodel: translate(-50%, -50%);
}

Later, we reposition them to type a cylinder across the .carousel-container utilizing rotateY(calc(var(--n) * 72deg)), which pushes every merchandise ahead with translateZ(400px), with out which the objects would edge into each other.

400px serves because the cylinder’s radius. I attempted totally different radii from 100 to see which one would make every merchandise seem individually, and 400px received.

.carousel-item {
  place: absolute;
  left: 50%;
  high: 50%;
  remodel: translate(-50%, -50%) rotateY(calc(var(--n) * 72deg)) translateZ(400px);
}

Every .carousel-item has a variable, --n: x, the place x is a quantity from 0 to 4. Since there are 5 whole objects, we discovered the right angle for the rotateY() operate by dividing 360deg (a full flip) by 5 to get 72deg

Now we use JavaScript to rotate the .carousel-container by 72deg when the “Subsequent” and “Prev” buttons are clicked. This pushes the following or earlier panel to the entrance, relying on the button you click on.

let currentRotation = 0;
const anglePerItem = 72;

operate rotateCarousel(path) {
  currentRotation += path * anglePerItem;
  carouselContainer.type.remodel = `rotateY(${currentRotation}deg)`;
}

nextBtn.addEventListener("click on", () => {
  rotateCarousel(1);
});

prevBtn.addEventListener("click on", () => {
  rotateCarousel(-1);
});

Instance: Web page flip

Keep in mind the horizontal flipping card we checked out earlier? We are able to construct off of it to make it seem like a e book web page flip.

We’re going so as to add the transform-origin property to it. It defines the purpose on the axis at which the rotation happens. By default, it’s the middle, and that’s what we’ve used to date, however we’re altering it right here to left heart. The brand new place permits the ingredient to be flipped from the middle of the left edge, as in books, reasonably than from the primary heart within the flipping card impact.

.web page {
  transform-origin: left heart;
  transform-style: preserve-3d;
  transition: remodel 1.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

The rotateY() operate, when mixed with transform-origin: left heart;, can create a sensible page-turning impact for digital books, portfolios, or storytelling interfaces.

It is best to know the way to use rotateY() by now, so let’s skip to the magic. Solely the proper web page is animated, in order that’s the place the remodel is targeted. We gave .web page a transform-origin of left heart; so it rotates on the vertical axis across the heart of the left finish.

Then, when the .turning class is triggered on clicking the web page, rotateY(-180deg) flip it over across the outlined rotation level.

.web page.turning {
  remodel: rotateY(-180deg);
}

To forestall the content material of the web page’s back and front from exhibiting via, we use backface-visibility: hidden; to cover it when it’s turned over.

.page-front,
.page-back {
  backface-visibility: hidden;
}

Additionally, we pre-rotate the again web page so the content material isn’t inverted when it’s turned towards the viewer.

.page-back {
  remodel: rotateY(180deg);
}

Specification

The CSS rotateY() operate is outlined within the CSS Transforms Module Stage 2 draft.

Browser help

The rotateY() operate is supported on all fashionable browsers.

Associated