.dd-scene {
width: 250px;
height: 250px;
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); }
}