CSS
语言：
CSSSCSS
确定
/* ok */
html,
body {
height: 100%;
}
html {
overflow: hidden;
}
body {
margin: 0;
perspective: 32em;
background: dimgrey;
color: white;
}
.polyhedron,
.polyhedron *,
.polyhedron *:before {
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
}
.polyhedron--icosidodecahedron {
animation: ani 16s linear infinite;
}
/**/
@keyframes ani {
from {
transform: rotate(0deg) rotateX(0deg);
}
to {
transform: rotate(360deg) rotateX(-720deg);
}
}
.polyhedron--pentagonal-rotunda:first-child {
transform: translateY(-5.50553em);
}
.polyhedron--pentagonal-rotunda:last-child {
transform: rotateY(36deg) scaleY(-1) translateY(-5.50553em);
}
.polyhedron__face {
overflow: hidden;
margin: -4em;
width: 8em;
height: 8em;
}
.polyhedron__face *,
.polyhedron__face:before,
.polyhedron__face *:before {
overflow: hidden;
margin: inherit;
width: inherit;
height: inherit;
}
.polyhedron__face--triangle:before,
.penta__inner:before {
border: solid .0625em;
content: '';
}
.polyhedron__face--triangle {
border-top: solid .125em;
border-left: solid .125em;
}
.polyhedron__face--triangle:before {
transform: scaleX(1.1547) skewY(-30deg) rotate(-30deg) translateY(-50%);
}
.polyhedron__face--pentagon {
margin: -10.47214em;
width: 20.94427em;
height: 20.94427em;
transform: rotateY(144deg) translate3d(-0.0625em, -5.50553em, 5.50553em) rotateX(90deg) rotate(-54deg) skewY(18deg) scaleX(0.95106);
}
.penta__inner {
transform: scaleX(1.05146) skewY(-18deg) rotate(54deg) translateY(-7.60845em) rotate(18deg) skewY(54deg) scaleX(0.58779);
}
.penta__inner:before {
margin: -6.15537em -6.80521em;
width: 13.61041em;
height: 12.31073em;
transform: scaleX(1.7013) skewY(-54deg) rotate(-18deg) translateY(1.45309em);
background: rgba(247, 80, 103, 0.32);
background: radial-gradient(circle at 6.80521em 0em, rgba(255, 77, 0, 0.32), rgba(255, 77, 0, 0) 8.50651em), radial-gradient(circle at 13.27734em 4.70228em, rgba(255, 0, 230, 0.32), rgba(255, 0, 230, 0) 8.50651em), radial-gradient(circle at 10.80521em 12.31073em, rgba(0, 26, 255, 0.32), rgba(0, 26, 255, 0) 8.50651em), radial-gradient(circle at 2.80521em 12.31073em, rgba(0, 255, 179, 0.32), rgba(0, 255, 179, 0) 8.50651em), radial-gradient(circle at 0.33307em 4.70228em, rgba(128, 255, 0, 0.32), rgba(128, 255, 0, 0) 8.50651em);
background-position: 50% 50%;
background-size: 13.61041em 13.61041em;
}
.polyhedron__face--triangle:nth-child(1) {
transform: rotateY(0deg) translate3d(0, 5.44303em, 12.31073em) rotateX(10.81232deg) rotate(30deg) skewY(30deg) scaleX(0.86603);
}
.polyhedron__face--triangle:nth-child(1):before {
background: linear-gradient(90deg, rgba(255, 153, 0, 0.32), rgba(204, 255, 0, 0.32));
}
.polyhedron__face--triangle:nth-child(6) {
transform: rotateY(0deg) rotate(180deg) translate3d(0, 5.50553em, 5.50553em) rotateX(-52.62263deg) rotate(30deg) skewY(30deg) scaleX(0.86603);
}
.polyhedron__face--triangle:nth-child(6):before {
background: linear-gradient(90deg, rgba(255, 153, 0, 0.32), rgba(204, 255, 0, 0.32));
}
.polyhedron__face--pentagon:nth-child(11) {
transform: rotateY(36deg) translate3d(0, 5.50553em, 12.31073em) rotateX(26.56505deg) rotate(-54deg) skewY(18deg) scaleX(0.95106);
}
.polyhedron__face--pentagon:nth-child(11) .penta__inner:before {
background: linear-gradient(90deg, rgba(204, 255, 0, 0.32), rgba(51, 255, 0, 0.32));
}
.polyhedron__face--triangle:nth-child(2) {
transform: rotateY(72deg) translate3d(0, 5.44303em, 12.31073em) rotateX(10.81232deg) rotate(30deg) skewY(30deg) scaleX(0.86603);
}
.polyhedron__face--triangle:nth-child(2):before {
background: linear-gradient(90deg, rgba(51, 255, 0, 0.32), rgba(0, 255, 102, 0.32));
}
.polyhedron__face--triangle:nth-child(7) {
transform: rotateY(72deg) rotate(180deg) translate3d(0, 5.50553em, 5.50553em) rotateX(-52.62263deg) rotate(30deg) skewY(30deg) scaleX(0.86603);
}
.polyhedron__face--triangle:nth-child(7):before {
background: linear-gradient(90deg, rgba(51, 255, 0, 0.32), rgba(0, 255, 102, 0.32));
}
.polyhedron__face--pentagon:nth-child(12) {
transform: rotateY(108deg) translate3d(0, 5.50553em, 12.31073em) rotateX(26.56505deg) rotate(-54deg) skewY(18deg) scaleX(0.95106);
}
.polyhedron__face--pentagon:nth-child(12) .penta__inner:before {
background: linear-gradient(90deg, rgba(0, 255, 102, 0.32), rgba(0, 255, 255, 0.32));
}
.polyhedron__face--triangle:nth-child(3) {
transform: rotateY(144deg) translate3d(0, 5.44303em, 12.31073em) rotateX(10.81232deg) rotate(30deg) skewY(30deg) scaleX(0.86603);
}
.polyhedron__face--triangle:nth-child(3):before {
background: linear-gradient(90deg, rgba(0, 255, 255, 0.32), rgba(0, 102, 255, 0.32));
}
.polyhedron__face--triangle:nth-child(8) {
transform: rotateY(144deg) rotate(180deg) translate3d(0, 5.50553em, 5.50553em) rotateX(-52.62263deg) rotate(30deg) skewY(30deg) scaleX(0.86603);
}
.polyhedron__face--triangle:nth-child(8):before {
background: linear-gradient(90deg, rgba(0, 255, 255, 0.32), rgba(0, 102, 255, 0.32));
}
.polyhedron__face--pentagon:nth-child(13) {
transform: rotateY(180deg) translate3d(0, 5.50553em, 12.31073em) rotateX(26.56505deg) rotate(-54deg) skewY(18deg) scaleX(0.95106);
}
.polyhedron__face--pentagon:nth-child(13) .penta__inner:before {
background: linear-gradient(90deg, rgba(0, 102, 255, 0.32), rgba(51, 0, 255, 0.32));
}
.polyhedron__face--triangle:nth-child(4) {
transform: rotateY(216deg) translate3d(0, 5.44303em, 12.31073em) rotateX(10.81232deg) rotate(30deg) skewY(30deg) scaleX(0.86603);
}
.polyhedron__face--triangle:nth-child(4):before {
background: linear-gradient(90deg, rgba(51, 0, 255, 0.32), rgba(204, 0, 255, 0.32));
}
.polyhedron__face--triangle:nth-child(9) {
transform: rotateY(216deg) rotate(180deg) translate3d(0, 5.50553em, 5.50553em) rotateX(-52.62263deg) rotate(30deg) skewY(30deg) scaleX(0.86603);
}
.polyhedron__face--triangle:nth-child(9):before {
background: linear-gradient(90deg, rgba(51, 0, 255, 0.32), rgba(204, 0, 255, 0.32));
}
.polyhedron__face--pentagon:nth-child(14) {
transform: rotateY(252deg) translate3d(0, 5.50553em, 12.31073em) rotateX(26.56505deg) rotate(-54deg) skewY(18deg) scaleX(0.95106);
}
.polyhedron__face--pentagon:nth-child(14) .penta__inner:before {
background: linear-gradient(90deg, rgba(204, 0, 255, 0.32), rgba(255, 0, 153, 0.32));
}
.polyhedron__face--triangle:nth-child(5) {
transform: rotateY(288deg) translate3d(0, 5.44303em, 12.31073em) rotateX(10.81232deg) rotate(30deg) skewY(30deg) scaleX(0.86603);
}
.polyhedron__face--triangle:nth-child(5):before {
background: linear-gradient(90deg, rgba(255, 0, 153, 0.32), rgba(255, 0, 0, 0.32));
}
.polyhedron__face--triangle:nth-child(10) {
transform: rotateY(288deg) rotate(180deg) translate3d(0, 5.50553em, 5.50553em) rotateX(-52.62263deg) rotate(30deg) skewY(30deg) scaleX(0.86603);
}
.polyhedron__face--triangle:nth-child(10):before {
background: linear-gradient(90deg, rgba(255, 0, 153, 0.32), rgba(255, 0, 0, 0.32));
}
.polyhedron__face--pentagon:nth-child(15) {
transform: rotateY(324deg) translate3d(0, 5.50553em, 12.31073em) rotateX(26.56505deg) rotate(-54deg) skewY(18deg) scaleX(0.95106);
}
.polyhedron__face--pentagon:nth-child(15) .penta__inner:before {
background: linear-gradient(90deg, rgba(255, 0, 0, 0.32), rgba(255, 153, 0, 0.32));
}