3D Space
The perspective
property enables a 3D-space for child elements.
Its value determines the strength of a child's z-transform effect.
Large perspective
values cause small transformations, small values cause large transformations.
/index.css
.parent {perspective: 800px;}
Vanishing point
perspectiveOrigin
defines the vanishing point.
Its default value is 50% 50%
.
Centered horizontally and vertically.
/index.css
.parent {perspective: 800px;perspective-origin: 50% 50%;}
Translate
translate3d(<x>, <y>, <z>)
:
- ▪
<x>
moves a child horizontally - ▪
<y>
moves a child vertically - ▪
<z>
moves a child closer or further away. The strength of the effect is determined by the value ofperspective
.
/index.css
.parent {perspective: 800px;perspective-origin: 50% 50%;}.child {transform: translate3d(0px, 0px, -500px);}
Scale
- ▪
scale3d(<x>, <y>, <z>)
resizes the element in 3D space.
/index.css
.parent {perspective: 800px;perspective-origin: 50% 50%;}.child {transform: scale3d(1, 1, 1);}
Rotate
- ▪
rotateX(...)
rotates a child around the x-axis - ▪
rotateY(...)
rotates a child around the y-axis - ▪
rotateZ(...)
rotates a child around the z-axis
/index.css
.parent {perspective: 800px;perspective-origin: 50% 50%;}.child {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
All
/index.css
.parent {perspective: 800px;perspective-origin: 50% 50%;}.child {transform:translate3d(0px, 0px, -500px)scale3d(1, 1, 1)rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
preserve-3d
Below is an image containing three levels of elements:
- ▪
.parent
, - ▪
.child
and - ▪
.grandChild
.
.parent
provides the 3D space.
.child
and .grandChild
transform when the button is clicked.
As .grandChild
isn't a direct descendant of .parent
, it doesn't exist in the 3D-space.
It's flattened to .child
's plane.
3D transforms will have no effect.
However, if we set transform-style: preserve-3d
on .grandChild
, it will be added to the space.
SVG children
Currently, 3D transforms aren't supported on SVG children.
Use Case: Screen Realestate
When a web page transitions from being displayed on a desktop to a mobile device, there is less screen realestate to work with. When this happens, it is common to remove lower-priority elements from the UI (User Interface). Rotating elements on the y-axis provides more screen realestate to work this. This allows more of the UI to remain on the screen when transitioning to smaller devices.
Drag the bottom-right corner of the list below.
As the width gets smaller, the ul
rotates on the y-axis.
Providing more space for content to the right of the list.
This does come with a cost. The greater the rotation, the more readability is lost. However, we don't always need 100% readability. Graphic designer David Carson once designed numbers for the floors of a hotel. They would be the first thing a guest sees when stepping off the elevator. He created images that are a combination of the number and the word of the number (with missing letters) in unusual arrangements. His design isn't readable, but is understandable.
Other Use Cases
- ▪ Unique menu layout
- ▪ Above the fold animation
- ▪ When explaining a process, to help the user maintain context when moving from 1 step to the next.
- ▪ A different approach to a presentation slide deck.
- ▪ To communicate complex architecture from big picture to low-level detail without overwhelming the user. Through the use of zoom to show / hide information.