3D CSS

Let's start with a single square plane, with an animation applied to keep it spinning.

Start with a < container >, and inside put a wrapper and a div inside of the wrapper. The innermost div (#card) will be the object.

Code:
#card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: rotate 5s ease-in-out infinite;
transform: rotateY( 0deg );
background: black;
opacity: .9; }

Now onto a classic 3-Dimensional figure: The Cube

Set it up the same way as the single square, but now we must create a div/figure for each side of the cube, within an inner #cube element.
The code gets a bit more confusing here, so let's break it into two sections.

Container and Wrapper.

.container {
width: 200px;
height: 200px;
position: relative;
perspective: 1000px;
left: 40%;
top: 10vh;
padding-bottom: 50%;
padding-top: 5%;}
.Wrapper {
width: 200px;
height: 200px;
position: absolute; }

Positioning of elements is a bit trickier.

#cube {.front { transform: rotateY( 0deg ) translateZ( 100px );} }
#cube {.back { transform: rotateX( 180deg ) translateZ( 100px );} }
#cube {.right { transform: rotateY( 90deg ) translateZ( 100px );} }
#cube {.left { transform: rotateY( -90deg ) translateZ( 100px );} }
#cube {.top { transform: rotateX( 90deg ) translateZ( 100px );} }
#cube {.bottom { transform: rotateX( -90deg ) translateZ( 100px );} }

Triangles and pyramids get a bit trickier. Triangles in css are made using borders. This tutorial on making triangles explains it perfectly.
Do a little bit of math and you'll have yourself a pyramid.
The only big change is a transparent .wall class.

.Wrapper { width: 200px; height: 200px; position: absolute; }
#pyramid { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; animation: rotate 5s ease-in-out infinite; }
.wall { width: 0px; height: 0px; border: 100px solid transparent; opacity: .8; position: absolute; }

Only make the bottom border a color in order to achieve the triangle.

#pyramid { .arrowFr{ transform: rotateY(0deg) rotateX(30deg) translateY(10px) translateZ(22px); opacity: .7; border-bottom: 200px solid black;} }
#pyramid { .arrowBa { transform: rotateX(330deg) translateY(10px) translateZ(-23px); opacity: .7; border-bottom: 200px solid black;} }
#pyramid {.arrowR { transform: rotateY(90deg) rotateX(30deg) translateY(9px) translateZ(22px); opacity: .7; border-bottom: 200px solid black;} }
#pyramid {.arrowL { transform: rotateY(-90deg) rotateX(30deg) translateY(10px) translateZ(23px); opacity: .7; border-bottom: 200px solid black;} }
#pyramid {.bottom2 { transform: rotateX( -90deg ); opacity: .7; background-color: black;} }

#pyramid {.front2 { transform: rotateY( 0deg ) translateZ( 300px );} }
#pyramid {.back2 { transform: rotateX( 180deg ) translateZ( 200px );} }
#pyramid {.right2 { transform: rotateY( 90deg ) rotateX( 45deg) translateZ( 200px );} }
#pyramid {.left2 { transform: rotateY( -90deg ) rotateX( 45deg) translateZ( 200px );} }
#pyramid {.bottom2 { transform: rotateX( -90deg ) translateZ( 177px );} }