diff --git a/content/css/concepts/transform-functions/terms/rotateY/rotateY.md b/content/css/concepts/transform-functions/terms/rotateY/rotateY.md new file mode 100644 index 00000000000..3ac151489a9 --- /dev/null +++ b/content/css/concepts/transform-functions/terms/rotateY/rotateY.md @@ -0,0 +1,42 @@ +--- +Title: 'rotateY()' +Description: 'Rotates an element around the Y-axis in 3D space.' +Subjects: + - 'Web Development' + - 'Web Design' +Tags: + - 'CSS' + - '3D Transforms' + - 'Animations' +CatalogContent: + - 'learn-css' + - '3d-transforms' + - 'css-transforms' + - 'transform-functions' +--- + +The `rotateY()` function is a CSS transform function that allows you to rotate an element around the Y-axis (the vertical axis) in 3D space. This function is particularly useful for creating 3D effects and animations on web pages. + +## Syntax + +```css +transform: rotateY(angle); +``` + +**Parameters:** + +- `angle`: The angle of rotation, which can be specified in degrees (deg) or radians (rad). Positive values rotate the element clockwise, while negative values rotate it counterclockwise. + +## Example + +```css +.box { + transform: rotateY(45deg);} +``` + +In this example, the element with the class `box` will be rotated 45 degrees around the Y-axis. + +> **Note:** + +The `rotateY` function is supported in all modern browsers, but it's always a good idea to check for compatibility if you're targeting older browsers. +