Cube via CSS Transformations

The most intuitive / easiest 3D shape to form in CSS. Two parent containers; one to act as the bounds of the cube; another to use as an origin point for the cube. Then 6 elements for each face.

Face 1

Face 2

Face 3

Face 4

Face 5

Face 6

*CSS Properties used*

Parent Container CSS Props:
    // To add direct children elements into the same 3D context. 
    // By default child elements are rendered flat onto their parent container's face/plane.
    transform-style: preserve-3d; 

    // Your closeness / field of view to the object (optional), by default is infinite / orthographic.
    transform: perspective(40vw);

Face translation example:
    transform: translateY(-6vw) rotateX(90deg);

By Alanas Jakubauskas