Polygon Dodecahedron in CSS

Developer
Size
7,606 Kb
Views
30,360

How do I make an polygon dodecahedron in css?

Checkout the original Dodecahedron by the awesome Ana Tudor!. What is a polygon dodecahedron in css? How do you make a polygon dodecahedron in css? This script and codes were developed by Ee Venn Soh on 07 September 2022, Wednesday.

Polygon Dodecahedron in CSS Previews

Polygon Dodecahedron in CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Polygon Dodecahedron in CSS</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { display: flex; height: 100%; width: 100%; margin: 0; padding: 0; background-color: black; overflow: hidden;
}
a { text-decoration: none; color: white;
}
h1, p { margin: 0;
}
.scene-polygon { margin: auto; height: 100%; display: flex;
}
.pol-wrap { height: inherit; perspective: 35rem; perspective-origin: 50% 50%; position: absolute; left: 50%; animation: up 4s 1 ease-in-out;
}
.pol-dodecahedron { position: relative; transform-style: preserve-3d; animation: spin 50s infinite alternate cubic-bezier(0, -5, 1, 10);
}
.pol-dodecahedron, .pol-pentagon, .pol-pentagon-inner, .pol-pentagon-inner::before { top: 50%; left: 50%; margin: -10em; width: 20em; height: 20em;
}
.pol-pentagon, .pol-pentagon-inner, .pol-pentagon-inner::before { position: absolute; overflow: hidden;
}
.pol-pentagon:nth-child(1) { transform: scaleY(-1) translateY(8.50651em) rotateY(1.88496rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(1) .pol-pentagon-inner::before { animation: color1 3s infinite alternate linear;
}
.pol-pentagon:nth-child(2) { transform: scaleY(-1) translateY(8.50651em) rotateY(3.14159rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(2) .pol-pentagon-inner::before { animation: color2 3s infinite alternate linear;
}
.pol-pentagon:nth-child(3) { transform: scaleY(-1) translateY(8.50651em) rotateY(4.39823rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(3) .pol-pentagon-inner::before { animation: color3 3s infinite alternate linear;
}
.pol-pentagon:nth-child(4) { transform: scaleY(-1) translateY(8.50651em) rotateY(5.65487rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(4) .pol-pentagon-inner::before { animation: color4 3s infinite alternate linear;
}
.pol-pentagon:nth-child(5) { transform: scaleY(-1) translateY(8.50651em) rotateY(6.9115rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(5) .pol-pentagon-inner::before { animation: color5 3s infinite alternate linear;
}
.pol-pentagon:nth-child(6) { transform: scaleY(-1) translateY(8.50651em) rotateX(1.5708rad) scaleY(-1) translateY(5.25731em) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(6) .pol-pentagon-inner::before { animation: color6 3s infinite alternate linear;
}
.pol-pentagon:nth-child(7) { transform: translateY(8.50651em) rotateY(10.0531rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(7) .pol-pentagon-inner::before { animation: color7 3s infinite alternate linear;
}
.pol-pentagon:nth-child(8) { transform: translateY(8.50651em) rotateY(11.30973rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(8) .pol-pentagon-inner::before { animation: color8 3s infinite alternate linear;
}
.pol-pentagon:nth-child(9) { transform: translateY(8.50651em) rotateY(12.56637rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(9) .pol-pentagon-inner::before { animation: color9 3s infinite alternate linear;
}
.pol-pentagon:nth-child(10) { transform: translateY(8.50651em) rotateY(13.82301rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(10) .pol-pentagon-inner::before { animation: color10 3s infinite alternate linear;
}
.pol-pentagon:nth-child(11) { transform: translateY(8.50651em) rotateY(15.07964rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(11) .pol-pentagon-inner::before { animation: color11 3s infinite alternate linear;
}
.pol-pentagon:nth-child(12) { transform: translateY(8.50651em) rotateX(1.5708rad) translateY(5.25731em) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(12) .pol-pentagon-inner::before { animation: color12 3s infinite alternate linear;
}
.pol-pentagon-inner { transform: scaleY(1.05146) skewX(-0.31416rad) rotate(0.62832rad) translateY(-7.26543em) rotate(0.31416rad) skewY(0.94248rad) scaleX(0.58779);
}
.pol-pentagon-inner:before { content: ""; transform: scaleX(1.7013) skewY(-0.94248rad) rotate(-0.31416rad) translateY(-2.73457em);
}
@keyframes color1 { 0% { background: rgba(181, 181, 181, 0.5); } 20% { background: rgba(232, 232, 232, 0.5); } 40% { background: rgba(36, 36, 36, 0.4); } 60% { background: rgba(224, 224, 224, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color2 { 0% { background: rgba(20, 20, 20, 0.5); } 20% { background: rgba(250, 250, 250, 0.5); } 40% { background: rgba(219, 219, 219, 0.4); } 60% { background: rgba(191, 191, 191, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color3 { 0% { background: rgba(69, 69, 69, 0.5); } 20% { background: rgba(148, 148, 148, 0.5); } 40% { background: rgba(171, 171, 171, 0.4); } 60% { background: rgba(43, 43, 43, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color4 { 0% { background: rgba(252, 252, 252, 0.5); } 20% { background: rgba(82, 82, 82, 0.5); } 40% { background: rgba(66, 66, 66, 0.4); } 60% { background: rgba(143, 143, 143, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color5 { 0% { background: rgba(33, 33, 33, 0.5); } 20% { background: rgba(161, 161, 161, 0.5); } 40% { background: rgba(5, 5, 5, 0.4); } 60% { background: rgba(66, 66, 66, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color6 { 0% { background: rgba(196, 196, 196, 0.5); } 20% { background: rgba(148, 148, 148, 0.5); } 40% { background: rgba(150, 150, 150, 0.4); } 60% { background: rgba(219, 219, 219, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color7 { 0% { background: rgba(54, 54, 54, 0.5); } 20% { background: rgba(235, 235, 235, 0.5); } 40% { background: rgba(232, 232, 232, 0); } 60% { background: rgba(212, 212, 212, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color8 { 0% { background: rgba(10, 10, 10, 0.5); } 20% { background: rgba(252, 252, 252, 0.5); } 40% { background: rgba(77, 77, 77, 0); } 60% { background: rgba(69, 69, 69, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color9 { 0% { background: rgba(79, 79, 79, 0.5); } 20% { background: rgba(94, 94, 94, 0.5); } 40% { background: rgba(179, 179, 179, 0); } 60% { background: rgba(79, 79, 79, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color10 { 0% { background: rgba(176, 176, 176, 0.5); } 20% { background: rgba(43, 43, 43, 0.5); } 40% { background: rgba(43, 43, 43, 0); } 60% { background: rgba(71, 71, 71, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color11 { 0% { background: rgba(92, 92, 92, 0.5); } 20% { background: rgba(48, 48, 48, 0.5); } 40% { background: rgba(82, 82, 82, 0); } 60% { background: rgba(168, 168, 168, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color12 { 0% { background: rgba(110, 110, 110, 0.5); } 20% { background: rgba(43, 43, 43, 0.5); } 40% { background: rgba(66, 66, 66, 0); } 60% { background: rgba(41, 41, 41, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
.pol-pentagon:nth-child(1) { animation: translate1 6s infinite 1s alternate ease-in-out;
}
@keyframes translate1 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(1.88496rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(1.88496rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(1.88496rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-6.28319rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-10.0531rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(2) { animation: translate2 6s infinite 1s alternate ease-in-out;
}
@keyframes translate2 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(3.14159rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(3.14159rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(3.14159rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-8.79646rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-12.56637rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(3) { animation: translate3 6s infinite 1s alternate ease-in-out;
}
@keyframes translate3 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(4.39823rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(4.39823rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(4.39823rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-11.30973rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-15.07964rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(4) { animation: translate4 6s infinite 1s alternate ease-in-out;
}
@keyframes translate4 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(5.65487rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(5.65487rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(5.65487rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-13.82301rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-17.59292rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(5) { animation: translate5 6s infinite 1s alternate ease-in-out;
}
@keyframes translate5 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(6.9115rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(6.9115rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(6.9115rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-16.33628rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-20.10619rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(6) { animation: translate6 6s infinite 1s alternate ease-in-out;
}
@keyframes translate6 { 100% { transform: scaleY(-1) translateY(17.01302em) rotateX(1.5708rad) scaleY(-1) translateY(5.25731em) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); }
}
.pol-pentagon:nth-child(7) { animation: translate7 6s infinite 1s alternate ease-in-out;
}
@keyframes translate7 { 0%, 20% { transform: translateY(8.50651em) rotateY(10.0531rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(10.0531rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(9.42478rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-21.36283rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-25.13274rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(8) { animation: translate8 6s infinite 1s alternate ease-in-out;
}
@keyframes translate8 { 0%, 20% { transform: translateY(8.50651em) rotateY(11.30973rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(11.30973rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(10.68142rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-23.8761rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-27.64602rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(9) { animation: translate9 6s infinite 1s alternate ease-in-out;
}
@keyframes translate9 { 0%, 20% { transform: translateY(8.50651em) rotateY(12.56637rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(12.56637rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(11.93805rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-26.38938rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-30.15929rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(10) { animation: translate10 6s infinite 1s alternate ease-in-out;
}
@keyframes translate10 { 0%, 20% { transform: translateY(8.50651em) rotateY(13.82301rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(13.82301rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(13.19469rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-28.90265rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-32.67256rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(11) { animation: translate11 6s infinite 1s alternate ease-in-out;
}
@keyframes translate11 { 0%, 20% { transform: translateY(8.50651em) rotateY(15.07964rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(15.07964rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(14.45133rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-31.41593rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-35.18584rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(12) { animation: translate12 6s infinite 1s alternate ease-in-out;
}
@keyframes translate12 { 100% { transform: translateY(17.01302em) rotateX(1.5708rad) translateY(5.25731em) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); }
}
@keyframes spin { 100% { transform: rotateX(360deg) rotateY(360deg) translateX(3.81966em) rotateZ(-360deg); }
}
@keyframes up { 0% { transform: translateY(30rem); } 100% { transform: translateY(0); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='scene-polygon'> <div class='pol-wrap'> <div class='pol-dodecahedron'> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> <div class='pol-pentagon'> <div class='pol-pentagon-inner'></div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Polygon Dodecahedron in CSS - Script Codes CSS Codes

body { display: flex; height: 100%; width: 100%; margin: 0; padding: 0; background-color: black; overflow: hidden;
}
a { text-decoration: none; color: white;
}
h1, p { margin: 0;
}
.scene-polygon { margin: auto; height: 100%; display: flex;
}
.pol-wrap { height: inherit; perspective: 35rem; perspective-origin: 50% 50%; position: absolute; left: 50%; animation: up 4s 1 ease-in-out;
}
.pol-dodecahedron { position: relative; transform-style: preserve-3d; animation: spin 50s infinite alternate cubic-bezier(0, -5, 1, 10);
}
.pol-dodecahedron, .pol-pentagon, .pol-pentagon-inner, .pol-pentagon-inner::before { top: 50%; left: 50%; margin: -10em; width: 20em; height: 20em;
}
.pol-pentagon, .pol-pentagon-inner, .pol-pentagon-inner::before { position: absolute; overflow: hidden;
}
.pol-pentagon:nth-child(1) { transform: scaleY(-1) translateY(8.50651em) rotateY(1.88496rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(1) .pol-pentagon-inner::before { animation: color1 3s infinite alternate linear;
}
.pol-pentagon:nth-child(2) { transform: scaleY(-1) translateY(8.50651em) rotateY(3.14159rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(2) .pol-pentagon-inner::before { animation: color2 3s infinite alternate linear;
}
.pol-pentagon:nth-child(3) { transform: scaleY(-1) translateY(8.50651em) rotateY(4.39823rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(3) .pol-pentagon-inner::before { animation: color3 3s infinite alternate linear;
}
.pol-pentagon:nth-child(4) { transform: scaleY(-1) translateY(8.50651em) rotateY(5.65487rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(4) .pol-pentagon-inner::before { animation: color4 3s infinite alternate linear;
}
.pol-pentagon:nth-child(5) { transform: scaleY(-1) translateY(8.50651em) rotateY(6.9115rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(5) .pol-pentagon-inner::before { animation: color5 3s infinite alternate linear;
}
.pol-pentagon:nth-child(6) { transform: scaleY(-1) translateY(8.50651em) rotateX(1.5708rad) scaleY(-1) translateY(5.25731em) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(6) .pol-pentagon-inner::before { animation: color6 3s infinite alternate linear;
}
.pol-pentagon:nth-child(7) { transform: translateY(8.50651em) rotateY(10.0531rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(7) .pol-pentagon-inner::before { animation: color7 3s infinite alternate linear;
}
.pol-pentagon:nth-child(8) { transform: translateY(8.50651em) rotateY(11.30973rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(8) .pol-pentagon-inner::before { animation: color8 3s infinite alternate linear;
}
.pol-pentagon:nth-child(9) { transform: translateY(8.50651em) rotateY(12.56637rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(9) .pol-pentagon-inner::before { animation: color9 3s infinite alternate linear;
}
.pol-pentagon:nth-child(10) { transform: translateY(8.50651em) rotateY(13.82301rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(10) .pol-pentagon-inner::before { animation: color10 3s infinite alternate linear;
}
.pol-pentagon:nth-child(11) { transform: translateY(8.50651em) rotateY(15.07964rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(11) .pol-pentagon-inner::before { animation: color11 3s infinite alternate linear;
}
.pol-pentagon:nth-child(12) { transform: translateY(8.50651em) rotateX(1.5708rad) translateY(5.25731em) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106);
}
.pol-pentagon:nth-child(12) .pol-pentagon-inner::before { animation: color12 3s infinite alternate linear;
}
.pol-pentagon-inner { transform: scaleY(1.05146) skewX(-0.31416rad) rotate(0.62832rad) translateY(-7.26543em) rotate(0.31416rad) skewY(0.94248rad) scaleX(0.58779);
}
.pol-pentagon-inner:before { content: ""; transform: scaleX(1.7013) skewY(-0.94248rad) rotate(-0.31416rad) translateY(-2.73457em);
}
@keyframes color1 { 0% { background: rgba(181, 181, 181, 0.5); } 20% { background: rgba(232, 232, 232, 0.5); } 40% { background: rgba(36, 36, 36, 0.4); } 60% { background: rgba(224, 224, 224, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color2 { 0% { background: rgba(20, 20, 20, 0.5); } 20% { background: rgba(250, 250, 250, 0.5); } 40% { background: rgba(219, 219, 219, 0.4); } 60% { background: rgba(191, 191, 191, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color3 { 0% { background: rgba(69, 69, 69, 0.5); } 20% { background: rgba(148, 148, 148, 0.5); } 40% { background: rgba(171, 171, 171, 0.4); } 60% { background: rgba(43, 43, 43, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color4 { 0% { background: rgba(252, 252, 252, 0.5); } 20% { background: rgba(82, 82, 82, 0.5); } 40% { background: rgba(66, 66, 66, 0.4); } 60% { background: rgba(143, 143, 143, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color5 { 0% { background: rgba(33, 33, 33, 0.5); } 20% { background: rgba(161, 161, 161, 0.5); } 40% { background: rgba(5, 5, 5, 0.4); } 60% { background: rgba(66, 66, 66, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color6 { 0% { background: rgba(196, 196, 196, 0.5); } 20% { background: rgba(148, 148, 148, 0.5); } 40% { background: rgba(150, 150, 150, 0.4); } 60% { background: rgba(219, 219, 219, 0); } 80% { background: #cccccc; } 100% { background: rgba(51, 51, 51, 0.8); }
}
@keyframes color7 { 0% { background: rgba(54, 54, 54, 0.5); } 20% { background: rgba(235, 235, 235, 0.5); } 40% { background: rgba(232, 232, 232, 0); } 60% { background: rgba(212, 212, 212, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color8 { 0% { background: rgba(10, 10, 10, 0.5); } 20% { background: rgba(252, 252, 252, 0.5); } 40% { background: rgba(77, 77, 77, 0); } 60% { background: rgba(69, 69, 69, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color9 { 0% { background: rgba(79, 79, 79, 0.5); } 20% { background: rgba(94, 94, 94, 0.5); } 40% { background: rgba(179, 179, 179, 0); } 60% { background: rgba(79, 79, 79, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color10 { 0% { background: rgba(176, 176, 176, 0.5); } 20% { background: rgba(43, 43, 43, 0.5); } 40% { background: rgba(43, 43, 43, 0); } 60% { background: rgba(71, 71, 71, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color11 { 0% { background: rgba(92, 92, 92, 0.5); } 20% { background: rgba(48, 48, 48, 0.5); } 40% { background: rgba(82, 82, 82, 0); } 60% { background: rgba(168, 168, 168, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
@keyframes color12 { 0% { background: rgba(110, 110, 110, 0.5); } 20% { background: rgba(43, 43, 43, 0.5); } 40% { background: rgba(66, 66, 66, 0); } 60% { background: rgba(41, 41, 41, 0.4); } 80% { background: rgba(51, 51, 51, 0.8); } 100% { background: #cccccc; }
}
.pol-pentagon:nth-child(1) { animation: translate1 6s infinite 1s alternate ease-in-out;
}
@keyframes translate1 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(1.88496rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(1.88496rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(1.88496rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-6.28319rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-10.0531rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(2) { animation: translate2 6s infinite 1s alternate ease-in-out;
}
@keyframes translate2 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(3.14159rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(3.14159rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(3.14159rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-8.79646rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-12.56637rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(3) { animation: translate3 6s infinite 1s alternate ease-in-out;
}
@keyframes translate3 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(4.39823rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(4.39823rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(4.39823rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-11.30973rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-15.07964rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(4) { animation: translate4 6s infinite 1s alternate ease-in-out;
}
@keyframes translate4 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(5.65487rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(5.65487rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(5.65487rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-13.82301rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-17.59292rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(5) { animation: translate5 6s infinite 1s alternate ease-in-out;
}
@keyframes translate5 { 0%, 20% { transform: scaleY(-1) translateY(8.50651em) rotateY(6.9115rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: scaleY(-1) translateY(8.50651em) rotateY(6.9115rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: scaleY(-1) translateY(8.50651em) rotateY(6.9115rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: scaleY(-1) translateY(8.50651em) rotateY(-16.33628rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: scaleY(-1) translateY(8.50651em) rotateY(-20.10619rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(6) { animation: translate6 6s infinite 1s alternate ease-in-out;
}
@keyframes translate6 { 100% { transform: scaleY(-1) translateY(17.01302em) rotateX(1.5708rad) scaleY(-1) translateY(5.25731em) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); }
}
.pol-pentagon:nth-child(7) { animation: translate7 6s infinite 1s alternate ease-in-out;
}
@keyframes translate7 { 0%, 20% { transform: translateY(8.50651em) rotateY(10.0531rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(10.0531rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(9.42478rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-21.36283rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-25.13274rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(8) { animation: translate8 6s infinite 1s alternate ease-in-out;
}
@keyframes translate8 { 0%, 20% { transform: translateY(8.50651em) rotateY(11.30973rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(11.30973rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(10.68142rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-23.8761rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-27.64602rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(9) { animation: translate9 6s infinite 1s alternate ease-in-out;
}
@keyframes translate9 { 0%, 20% { transform: translateY(8.50651em) rotateY(12.56637rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(12.56637rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(11.93805rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-26.38938rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-30.15929rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(10) { animation: translate10 6s infinite 1s alternate ease-in-out;
}
@keyframes translate10 { 0%, 20% { transform: translateY(8.50651em) rotateY(13.82301rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(13.82301rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(13.19469rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-28.90265rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-32.67256rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(11) { animation: translate11 6s infinite 1s alternate ease-in-out;
}
@keyframes translate11 { 0%, 20% { transform: translateY(8.50651em) rotateY(15.07964rad) translateZ(5.25731em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 40% { transform: translateY(8.50651em) rotateY(15.07964rad) translateZ(10.51462em) rotateX(-0.46365rad) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); } 60% { transform: translateY(8.50651em) rotateY(14.45133rad) translateZ(10.51462em) rotateX(-1.39094rad); } 80% { transform: translateY(8.50651em) rotateY(-31.41593rad) translateZ(10.51462em) rotateX(-1.39094rad); } 100% { transform: translateY(8.50651em) rotateY(-35.18584rad) translateZ(5.25731em) rotateX(-2.78189rad); }
}
.pol-pentagon:nth-child(12) { animation: translate12 6s infinite 1s alternate ease-in-out;
}
@keyframes translate12 { 100% { transform: translateY(17.01302em) rotateX(1.5708rad) translateY(5.25731em) rotate(-0.62832rad) skewX(0.31416rad) scaleY(0.95106); }
}
@keyframes spin { 100% { transform: rotateX(360deg) rotateY(360deg) translateX(3.81966em) rotateZ(-360deg); }
}
@keyframes up { 0% { transform: translateY(30rem); } 100% { transform: translateY(0); }
}

Polygon Dodecahedron in CSS - Script Codes JS Codes

// Based on Ana Tudor's dodecahedron
Polygon Dodecahedron in CSS - Script Codes
Polygon Dodecahedron in CSS - Script Codes
Home Page Home
Developer Ee Venn Soh
Username vennsoh
Uploaded September 07, 2022
Rating 4
Size 7,606 Kb
Views 30,360
Do you need developer help for Polygon Dodecahedron in CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ee Venn Soh (vennsoh) Script Codes
Name
Blackout
UI
Crazy Ball
CSS Pattern
Meteor Rain
Folding
A Pen by Ee Venn Soh
Smiley Egg
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!