Brad Woods Digital Garden

Notes

The Warhammer 40k Adeptus Mechanicus symbol

    The Weighted Companion Cube from Aperture
    Wireframe of a square tunnel receding into the page

    3D in CSS

    Planted: 

    Tended: 

    Status: sprout

    Intended Audience: Front-end developers.

    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 of perspective.

    /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,
    • .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.

    Images of elevator floor numbers

    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