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;}
x
y
z
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%;}
x
y
z
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);}
x
y
z
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);}
x
y
z
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);}
x
y
z
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);}
x
y
z
preserve-3d
Below is an image containing three levels of elements:
- ▪
.parent, - ▪
.childand - ▪
.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.
Feedback
Have any feedback about this note or just want to comment about cool stuff like dinosaurs? Let me know...
Subscribe
One day I'll start sending emails.
