CSS 3D Transforms Last Updated : 07 Jan, 2025 Comments Improve Suggest changes Like Article Like Report CSS 3D transforms are used to manipulate HTML elements in three dimensions by rotating them along the x-axis, y-axis, and z-axis. There are three main types of transformation which are listed below:rotateX(): Rotates an element around its X-axis.rotateY(): Causes rotation around the Y-axis.rotateZ(): Enables rotation along the Z-axis. HTML <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> .box { width: 100px; height: 100px; background-color: green; transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg); } </style> <!--Driver Code Starts--> </head> <body> <div class="box"></div> </body> </html> <!--Driver Code Ends--> rotateX(30deg): Rotates the box 30 degrees around the X-axis (horizontal axis).rotateY(30deg) and rotateZ(30deg): Rotate the box around the Y-axis (vertical axis) and Z-axis (depth axis), creating a 3D effect.The rotateX() MethodThe rotateX() method in CSS is used to rotate an HTML element around its X-axis, which is horizontal. html <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> .box { width: 100px; height: 100px; background-color: orange; transform: rotateX(45deg); } </style> <!--Driver Code Starts--> </head> <body> <div class="box"></div> </body> </html> <!--Driver Code Ends--> In this Example:rotateX(45deg): Rotates the element 45 degrees downward around the X-axis.This creates a 3D tilt effect, making the top edge move backward.The rotateY() MethodThe rotateY() method in CSS is used to rotate an HTML element around its vertical Y-axis. This method allows the element to flip side to side, creating a mirror-like rotation effect. html <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> .box { width: 100px; height: 100px; background-color: green; transform: rotateY(45deg); } </style> <!--Driver Code Starts--> </head> <body> <div class="box"></div> </body> </html> <!--Driver Code Ends--> In this Example:rotateY(45deg): Applies a 45-degree rotation around the Y-axis, causing the left side of the box to move towards the viewer and the right side to move away.This rotation provides a visual effect of the element spinning from left to right.The rotateZ() MethodThe rotateZ() method in CSS is used to rotate an HTML element around its Z-axis, which is perpendicular to the screen. This rotation affects the element as if it were spinning flat on the screen. html <!--Driver Code Starts--> <html> <head> <!--Driver Code Ends--> <style> .box { width: 100px; height: 100px; background-color: red; transform: rotateZ(45deg); } </style> <!--Driver Code Starts--> </head> <body> <div class="box"></div> </body> </html> <!--Driver Code Ends--> In this example:rotateZ(45deg): Rotates the box 45 degrees around the Z-axis, creating a twist as if turning a dial.This rotation pivots the element around its center, altering its orientation on the plane of the screen.Best Practices for Using CSS 3D TransformsUse a perspective property on the parent container to enhance the 3D effect of transformations.Combine transforms with transitions or animations to smoothly animate changes in 3D space.Test responsiveness across different browsers and devices to ensure consistent behavior and appearance. Comment More infoAdvertise with us Next Article CSS Media Queries M manaschhabra2 Follow Improve Article Tags : Misc Web Technologies CSS CSS-Advanced Practice Tags : Misc Similar Reads Using the Tabindex Attribute in Navigation Bars with HTML & CSS The tabindex attribute is used to specify the order in which elements receive focus when the "tab" key is pressed. This allows for improved accessibility and control over the focus order for interactive elements on a webpage.What is tabindex?The tabindex attribute controls whether an element can be 2 min read Advanced Selectors in CSS Selectors are used for selecting the HTML elements in the attributes. Some different types of selectors are given below: Adjacent Sibling Selector: It selects all the elements that are adjacent siblings of specified elements. It selects the second element if it immediately follows the first element. 5 min read Advance CSS Layout with Flexbox Flexbox is a powerful CSS layout model that simplifies the creation of flexible and responsive layouts. It allows you to align and distribute space among items within a container, making complex designs easier to manage.Flexbox is particularly useful for building responsive designs that adapt seamle 4 min read CSS 2D Transforms A transformation in CSS is used to modify an element by its shape, size and position. It transforms the elements along the X-axis and Y-axis. There are 6 main types of transformation which are listed below:translate()rotate()scale()skewX()skewY()matrix()We will implement all these functions & wi 5 min read CSS 3D Transforms CSS 3D transforms are used to manipulate HTML elements in three dimensions by rotating them along the x-axis, y-axis, and z-axis. There are three main types of transformation which are listed below:rotateX(): Rotates an element around its X-axis.rotateY(): Causes rotation around the Y-axis.rotateZ() 3 min read CSS Media Queries CSS Media Queries are used to apply CSS styles according to the screen size.Media queries detect device features like screen width, height, and resolution.Breakpoints define the screen sizes where the design needs to change.They ensure a smooth, user-friendly experience across all devices.Syntax:@me 4 min read CSS Pagination Pagination is the process of dividing the document into pages and providing them with numbers. Types of Pagination: There are many types of pagination in CSS. Some of them are given below: Simple PaginationActive and Hoverable PaginationRounded Active and Hoverable ButtonsHoverable Transition Effect 7 min read CSS Gradients CSS gradients allow you to create smooth transitions between two or more colors, making your web elements visually appealing. Each gradient type blends colors in different ways, helping you enhance your designs. Learning how to use them will give you more control over your site's appearance.Types of 7 min read CSS Shadow Effect The shadow effect property in CSS is used to add shadows to text and images in HTML documents. This enhances the visual appeal and depth of your web elements, making your design more engaging. Text ShadowThe text-shadow property in CSS is used to display text with a shadow. This property defines the 2 min read CSS Animations CSS animations control the movement and appearance of elements on web pages. We can animate HTML elements without using JavaScript.Use @keyframes to define the animation steps.Apply animations with properties like animation-name and animation-duration.Control the animation flow using animation-timin 7 min read Like