HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

CSS 3D Transforms

❮ Previous Next ❯

CSS can also make things look 3D.

Hover your mouse pointer over the items below to observe how they change when transformed from two dimensions to three dimensions:

2D rotate
3D rotate

In this section, you'll discover a CSS attribute called:

  • transform

CSS 3D Transforms Methods

You can do cool stuff with the CSS "transform" property. It lets you play around with 3D transformations in three different ways.

  • rotateX()
  • rotateY()
  • rotateZ()

The rotateX() Method

The rotateX() function makes an element turn around its X-axis at a specific angle:

Example

#myDiv {
  transform: rotateX(150deg);
}
Try it Yourself »

The rotateY() Method

The rotateY() method turns an object around its Y-axis by a specific number of degrees:

Example

#myDiv {
  transform: rotateY(150deg);
}
Try it Yourself »

The rotateZ() Method

The rotateZ() function spins an object around its Z-axis by a specified angle:

Example

#myDiv {
  transform: rotateZ(90deg);
}
Try it Yourself »

CSS Transform Properties

Here is a table that shows all the properties used for 3D transformations:

Property Description
transform Applies a change in position or appearance to an element in two or three dimensions.
transform-origin Enables you to alter the placement of transformed elements.
transform-style Describes how things inside each other look in 3D.
perspective Describes how 3D objects are seen from a certain point of view.
perspective-origin This tells us where 3D things are at the bottom.
backface-visibility Specifies if an item should appear on the screen or not when it's not in view.

CSS 3D Transform Methods

Function Description
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)		 Describes a 3D change using a 4x4 grid of 16 numbers.
translate3d(x,y,z) Defines a 3D translation
translateX(x) Describes a 3D shift in position, focusing solely on the X-axis value.
translateY(y) Describes a movement in three dimensions, using only the Y-axis value.
translateZ(z) Describes a 3D shift by only altering the Z-axis value.
scale3d(x,y,z) Describes a 3D change in size.
scaleX(x) Describes a 3D resizing change by specifying a number for the horizontal (X-axis) size.
scaleY(y) Describes a 3D resizing change using a value for the vertical Y-axis.
scaleZ(z) Describes a change in size in three dimensions by specifying a number for the Z-axis.
rotate3d(x,y,z,angle) Describes a 3D spin.
rotateX(angle) Describes a spin in three dimensions around the horizontal X-axis.
rotateY(angle) Describes a turning in 3D around the vertical line.
rotateZ(angle) Describes a spinning movement in three dimensions around the vertical Z-axis.
perspective(n) Describes a way to view a 3D transformed object from a particular angle.
❮ Previous Next ❯