CSS 3D Transforms
CSS 3D Transforms are a set of properties that allow you to transform elements in 3D space. They can be used to create 3D effects such as rotating an element in 3D space or creating a 3D perspective.
Here are some of the most common CSS 3D Transform properties:
The transform-style: preserve-3d
property
This property allows child elements to preserve their 3D position relative to their parent element.
As an example:
Editor
In this example:
- The
.parent
element is set totransform-style: preserve-3d
to preserve the 3D position of its child elements. - The
.child
element is translated50
pixels away from the screen using translateZ(50px
).
The transform: translate3d(x, y, z)
property
This property allows you to move an element in 3D space. You can specify the amount of movement in pixels, percentages, or other units.
As an example:
Editor
In this example:
- The
.box
element is translated100
pixels to the right,50
pixels down, and20
pixels away from the screen.
The transform: rotate3d(x, y, z, angle)
property
This property allows you to rotate an element in 3D space around an axis specified by the x, y, and z values. You can use degrees, radians, or other units to specify the angle.
As an example:
Editor
In this example:
- The
.box
element is rotated 45 degrees around the x-axis usingrotate3d(1, 0, 0, 45deg)
.
The transform: scale3d(x, y, z)
property
This property allows you to resize an element in 3D space. You can specify the scaling factor as a decimal or percentage.
As an example:
Editor
In this example:
- The
.box
element is scaled to twice its original size in thex-direction
, stays the same in they-direction
, and scaled down to half its original size in the z-direction.
Perespective
This property creates a 3D perspective for the parent element, allowing you to control the depth of the 3D space.
As an example:
Editor
In this example:
- The
.parent
element is given aperspective
of1000px
to create a 3D perspective. - The .child element is translated
50
pixels away from the screen usingtranslateZ(50px)
.
The perspective-origin
property
This property allows you to specify the point around which the 3D space is viewed.
As an example:
Editor
In this example:
- The
.parent
element is given aperspective
of1000px
and aperspective-origin
of50
%50
% (the center of the element) to create a 3D perspective. - The
.child
element is translated50
pixels away from the screen usingtranslateZ(50px)
.