Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Backgrounds

0/1

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS 3D Transforms

10 minutes

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS object-fit

0/1

CSS object-position

0/1

CSS Masking

0/1

CSS Buttons

0/1

CSS Pagination

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS MQ Examples

0/1

CSS Flexbox

0/4

Text lesson

CSS 3D Transforms

Mouse over the elements below to observe the contrast between a 2D and a 3D transformation:

In this section, you’ll explore the following CSS attribute:

transform

Browser Support

The numbers in the table indicate the initial browser version that fully implements the property.

CSS 3D Transforms Methods

The CSS transform property enables the utilization of the following 3D transformation methods:

rotateX()
rotateY()
rotateZ()

The rotateX() Method

The rotateX() method rotates an element around its X-axis by a specified degree.

Example

#myDiv {
transform: rotateX(150deg);
}

The rotateY() Method

The rotateY() method rotates an element around its Y-axis at a given degree:

Example

#myDiv {
transform: rotateY(150deg);
}

The rotateZ() Method

The rotateZ() method rotates an element around its Z-axis by a specified degree.

Example

#myDiv {
transform: rotateZ(90deg);
}