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..1f2cac5fdd4 --- /dev/null +++ b/content/css/concepts/transform-functions/terms/rotateY/rotateY.md @@ -0,0 +1,41 @@ +--- +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. + +### Browser Compatibility + +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.