View source for Rotating CSS Dodecahedron

{{#css:
.dd-scene {
width: 200px;
height: 200px;
perspective: 600px;
margin: 100px;
}
.dd-scene .dodecahedron {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotatey 15s linear infinite;
}
.dd-scene .pentagon {
position: absolute;
width: 200px;
height: 200px;
}
.dd-scene .f01 { transform: translateZ(100px);}
.dd-scene .f02 { transform: rotate3d( 0,           1,0, 63.4378871deg) translateZ(100px);}
.dd-scene .f03 { transform: rotate3d( 3.0776835372,1,0, 63.4378871deg) translateZ(100px);}
.dd-scene .f04 { transform: rotate3d(-3.0776835372,1,0, 63.4378871deg) translateZ(100px);}
.dd-scene .f05 { transform: rotate3d( 0.726542528, 1,0,-63.4378871deg) translateZ(100px);}
.dd-scene .f06 { transform: rotate3d(-0.726542528, 1,0,-63.4378871deg) translateZ(100px);}
.dd-scene .f07 { transform: translateZ(-100px);}
.dd-scene .f08 { transform: rotate3d( 0,           1,0, 63.4378871deg) translateZ(-100px);}
.dd-scene .f09 { transform: rotate3d( 3.0776835372,1,0, 63.4378871deg) translateZ(-100px);}
.dd-scene .f10 { transform: rotate3d(-3.0776835372,1,0, 63.4378871deg) translateZ(-100px);}
.dd-scene .f11 { transform: rotate3d( 0.726542528, 1,0,-63.4378871deg) translateZ(-100px);}
.dd-scene .f12 { transform: rotate3d(-0.726542528, 1,0,-63.4378871deg) translateZ(-100px);}

.dd-scene .penta-inner-container {
width: 200px;
height: 200px;
}
.dd-scene .penta-inner {
top: calc((200px - 152.9px) / 2);
left: calc((200px - 145.77px) / 2);
position: absolute;
width: 145.77px;
height: 138.64px;
clip-path: polygon( 50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}
.dd-scene .f01 .penta-inner {background-color: rgba(255,0,  0,  0.5);}
.dd-scene .f02 .penta-inner {background-color: rgba(255,255,0,  0.5);}
.dd-scene .f03 .penta-inner {background-color: rgba(0,  255,0,  0.5);}
.dd-scene .f04 .penta-inner {background-color: rgba(0,  255,255,0.5);}
.dd-scene .f05 .penta-inner {background-color: rgba(0,  0,  255,0.5);}
.dd-scene .f06 .penta-inner {background-color: rgba(255,0,  255,0.5);}
.dd-scene .f07 .penta-inner {background-color: rgba(255,255,0,  0.5);}
.dd-scene .f08 .penta-inner {background-color: rgba(0,  255,0,  0.5);}
.dd-scene .f09 .penta-inner {background-color: rgba(0,  255,255,0.5);}
.dd-scene .f10 .penta-inner {background-color: rgba(0,  0,  255,0.5);}
.dd-scene .f11 .penta-inner {background-color: rgba(255,0,  255,0.5);}
.dd-scene .f12 .penta-inner {background-color: rgba(255,0,  0,  0.5);}
.dd-scene .f01 .penta-inner-container {transform:rotate(-18deg);}
.dd-scene .f02 .penta-inner-container {transform:rotate( 18deg);}
.dd-scene .f03 .penta-inner-container {transform:rotate( 18deg);}
.dd-scene .f04 .penta-inner-container {transform:rotate( 18deg);}
.dd-scene .f05 .penta-inner-container {transform:rotate( 18deg);}
.dd-scene .f06 .penta-inner-container {transform:rotate( 18deg);}
.dd-scene .f07 .penta-inner-container {transform:rotate( 18deg);}
.dd-scene .f08 .penta-inner-container {transform:rotate(-18deg);}
.dd-scene .f09 .penta-inner-container {transform:rotate(-18deg);}
.dd-scene .f10 .penta-inner-container {transform:rotate(-18deg);}
.dd-scene .f11 .penta-inner-container {transform:rotate(-18deg);}
.dd-scene .f12 .penta-inner-container {transform:rotate(-18deg);}

@keyframes rotatey {
0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
100% { transform: rotateX(1turn) rotateY(2turn) rotateZ(3turn); }
}
}}
<div class="dd-scene">
<div class="dodecahedron">
<div class="pentagon f01"><div class="penta-inner-container"><div class="penta-inner"></div></div></div>
<div class="pentagon f02"><div class="penta-inner-container"><div class="penta-inner"></div></div></div>
<div class="pentagon f03"><div class="penta-inner-container"><div class="penta-inner"></div></div></div>
<div class="pentagon f04"><div class="penta-inner-container"><div class="penta-inner"></div></div></div>
<div class="pentagon f05"><div class="penta-inner-container"><div class="penta-inner"></div></div></div>
<div class="pentagon f06"><div class="penta-inner-container"><div class="penta-inner"></div></div></div>
<div class="pentagon f07"><div class="penta-inner-container"><div class="penta-inner"></div></div></div>
<div class="pentagon f08"><div class="penta-inner-container"><div class="penta-inner"></div></div></div>
<div class="pentagon f09"><div class="penta-inner-container"><div class="penta-inner"></div></div></div>
<div class="pentagon f10"><div class="penta-inner-container"><div class="penta-inner"></div></div></div>
<div class="pentagon f11"><div class="penta-inner-container"><div class="penta-inner"></div></div></div>
<div class="pentagon f12"><div class="penta-inner-container"><div class="penta-inner"></div></div></div>
</div>
</div>
[[Category:Pages containing a rotating css dodecahedron]]<noinclude>[[Category:Rotating css polytopes]][[Category:Shapes]]</noinclude>