#container {
  perspective: 1200px; }
#parent {
  transform-style: preserve-3d; }

/* width: 320
 * sides: 4
 * distance (160.0):
 *   320 / (2 * tan(PI / 4))
 * angle     (90.0):
 *   360 / 4                 */
#firstflat {
  transform: rotateZ(0deg)
             translateY(160.0px); }

#secondflat {
  transform: rotateZ(-90.0deg)
             translateY(160.0px); }

#parent {
  transform: translateZ(-160.0px)
             rotateY(0deg); }

#parent {
  transform: translateZ(-160.0px)
             rotateY(-90.0deg); }

/* width: 320
 * sides: 5
 * distance (220.2):
 *   320 / (2 * tan(PI / 5))
 * angle     (72.0):
 *   360 / 5                 */
#firstflat {
  transform: rotateZ(0deg)
             translateY(220.2px); }

#secondflat {
  transform: rotateZ(-72.0deg)
             translateY(220.2px); }

#parent {
  transform: translateZ(-220.2px)
             rotateY(0deg); }

#parent {
  transform: translateZ(-220.2px)
             rotateY(-72.0deg); }

/* width: 320
 * sides: 8
 * distance (386.3):
 *   320 / (2 * tan(PI / 8))
 * angle     (45.0):
 *   360 / 8                 */
#firstflat {
  transform: rotateZ(0deg)
             translateY(386.3px); }

#secondflat {
  transform: rotateZ(-45.0deg)
             translateY(386.3px); }

#parent {
  transform: translateZ(-386.3px)
             rotateY(0deg); }

#parent {
  transform: translateZ(-386.3px)
             rotateY(-45.0deg); }