-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Create rotateY entry for CSS #7525
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No need to use h3 for parameters instead you can write it like: |
||
|
|
||
| - `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 | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This have to be h2 |
||
|
|
||
| ```css | ||
| .box { | ||
| transform: rotateY(45deg);} | ||
| ``` | ||
|
|
||
| In this example, the element with the class `box` will be rotated 45 degrees around the Y-axis. | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you create and attach a gif and image to showcase what the above code block does? |
||
|
|
||
| ### Browser Compatibility | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No need for a separate header for this instead use the note feature like: |
||
|
|
||
| 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. | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use
H2for syntax