See the Code - See it Full Page - See Details
CSS Variables and clip path to get a 3d dodecahedron with regular pentagon faces. All using math aside from one segment I couldn't get to line up properly. Plan to redo this and instead of using a square and then applying clip path (which leaves almost 5% off the top since the pentagon as oriented is shorter than it is wide) I want to rework it where the divs are rectangles and the points of each pentagon will have a 0% in either the x or y position. That will help with the rotation and getting the right origin point.
This Pen uses: HTML, CSS, JavaScript, and