Polygon Dodecahedron in CSS

Developer

Size

7,606 Kb

Views

30,360

Polygon Dodecahedron in CSS Previews
Polygon Dodecahedron in CSS HTML Codes
Polygon Dodecahedron in CSS CSS Codes
Polygon Dodecahedron in CSS JS Codes

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

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	Size
CSS Pattern	2,056 Kb
Folding	2,184 Kb
Meteor Rain	2,827 Kb
A Pen by Ee Venn Soh	2,469 Kb
Blackout	23,023 Kb
UI	3,031 Kb
Smiley Egg	5,786 Kb
Crazy Ball	2,767 Kb

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!

Similar Scripts & Codes

Name	Username	Size
Confirm Close Of Foundation Reveal Modal	Winghouchan	1,818 Kb
Fixed Scrolling Nav Bar	Philsinatra	0 Kb
A Pen by Sooba	Sooba	2,516 Kb
How to add Css Fold Notes In Blogger By Askwithloud.com	Askwithloud	2,280 Kb
Bootstrap Responsive Menu Drawer	JesseGlacken	3,777 Kb
Obligatory CSS3 UI Nav	Romandiaz	9,017 Kb
Sample Profile Screen	OurDailyBread	5,375 Kb
Fluid Layout with Float	Jxqr97	1,785 Kb
Animate elements with fixed gradient	Badabam	4,406 Kb
A Pen by utcwebdev	Utcwebdev	2,856 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!