rotateY() | CSS-Tips

The CSS rotateY() perform 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 factor turns horizontally. Think about a pin is caught to the highest of a component and it might probably solely rotate left or proper.

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

The rotateY() perform is outlined within the CSS Transforms Module Degree 2 specification.

Syntax

rotateY() = rotateY( [  |  ] )

Arguments

/*  in levels */
rotateY(90deg)   /* Component rotates 90 levels to the fitting */
rotateY(-180deg) /* Component rotates 180 levels to the left */

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

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

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

• : Values like 45deg, 0.5turn, -90deg, 1.57rad, and many others. When it’s a constructive angle, the fitting fringe of the factor rotates away from you (the factor seems to rotate to the fitting). When the angle is a damaging worth, the left edge rotates and the factor seems to rotate to the left.

The  kind 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 perform to create a visual 3D impact, you must set the perspective property on the mother or father factor. perspective defines the projection of the 3D factor from the viewer’s eyes.

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

.mother or father {
  perspective: 1000px;
}

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

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

Whereas with perspective, it appears to be like barely tilted to the fitting

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

Primary utilization

Some of the 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 mother or father 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);
}

Subsequent, we place the back and front faces of the cardboard completely throughout the container, whereas setting backface-visibility to hidden. It prevents the content material of every face from displaying by 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 mother or father is :hover-ed.

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

Instance: Picture carousel

The rotateY() perform can also be excellent for creating 3D picture carousels that showcase merchandise or galleries. Every merchandise may be positioned round a cylinder and rotated to indicate the viewer.

As soon as once more, as traditional, 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 gadgets 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 gained.

.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 complete gadgets, we discovered the proper angle for the rotateY() perform 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 subsequent or earlier panel to the entrance, relying on the button you click on.

let currentRotation = 0;
const anglePerItem = 72;

perform rotateCarousel(course) {
  currentRotation += course * 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 ebook 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 up to now, however we’re altering it right here to left heart. The brand new place permits the factor to be flipped from the middle of the left edge, as in books, fairly than from the principle 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() perform, when mixed with transform-origin: left heart;, can create a sensible page-turning impact for digital books, portfolios, or storytelling interfaces.

You must know use rotateY() by now, so let’s skip to the magic. Solely the fitting 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 stop the content material of the web page’s back and front from displaying by, 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() perform is outlined within the CSS Transforms Module Degree 2 draft.

Browser help

The rotateY() perform is supported on all trendy browsers.

Associated