rotateY()

by

In CSS, the rotateY() function is used to rotate an element around its Y-axis. This creates a 3D transformation effect, making the element appear to rotate left or right.

Syntax

transform: rotateY(angle);

angle: This specifies the angle of rotation, measured in degrees. Positive values rotate the element clockwise, while negative values rotate it counterclockwise.

Example

.rotated-element {
  transform: rotateY(45deg);
}

This will rotate the element with the class rotated-element 45 degrees to the right.

Combining with Other Transformations

You can combine rotateY() with other 2D and 3D transformations to create more complex effects. For example:

.complex-transform {
  transform: rotateY(30deg) scale(1.5) translateZ(100px);
}

This will rotate the element 30 degrees to the right, scale it by 1.5 times, and then translate it 100 pixels along the Z-axis (giving it a 3D depth effect).

Practical Use Cases

  • Creating 3D card flip effects: Rotate an element 180 degrees on the Y-axis to reveal its back side.
  • Animating elements: Use rotateY() in conjunction with CSS animations or JavaScript to create dynamic effects.
  • Creating 3D object transformations: Combine rotateY() with other 3D transformations to simulate 3D object rotations.