View source for Rotating CSS Icosahedron

<noinclude>20</noinclude>
{{#css:
.ic-scene {
width: 200px;
height: 200px;
perspective: 600px;
margin: 100px;
perspective: none;
}
.ic-scene .icosahedron {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotatey 15s linear infinite;
}
.ic-scene .triangle {
position: absolute;
width: 200px;
height: 200px;
}
.ic-scene .f01 { transform: rotate3d( 1, 1, 0, 54.7356103deg) translateZ(100px);}
.ic-scene .f02 { transform: rotate3d(-1, 1, 0, 54.7356103deg) translateZ(100px);}
.ic-scene .f03 { transform: rotate3d( 1,-1, 0, 54.7356103deg) translateZ(100px);}
.ic-scene .f04 { transform: rotate3d(-1,-1, 0, 54.7356103deg) translateZ(100px);}
.ic-scene .f05 { transform: rotate3d( 1, 1, 0, 54.7356103deg) translateZ(-100px);}
.ic-scene .f06 { transform: rotate3d(-1, 1, 0, 54.7356103deg) translateZ(-100px);}
.ic-scene .f07 { transform: rotate3d( 1,-1, 0, 54.7356103deg) translateZ(-100px);}
.ic-scene .f08 { transform: rotate3d(-1,-1, 0, 54.7356103deg) translateZ(-100px);}
.ic-scene .f09 { transform: rotate3d( 0,-1, 0, 69.0948426deg) translateZ(100px);}
.ic-scene .f10 { transform: rotate3d( 0, 1, 0, 69.0948426deg) translateZ(100px);}
.ic-scene .f11 { transform: rotate3d( 0,-1, 0, 69.0948426deg) translateZ(-100px);}
.ic-scene .f12 { transform: rotate3d( 0, 1, 0, 69.0948426deg) translateZ(-100px);}
.ic-scene .f13 { transform: rotate3d(-1, 0, 0, 20.9051574deg) translateZ(100px);}
.ic-scene .f14 { transform: rotate3d( 1, 0, 0, 20.9051574deg) translateZ(100px);}
.ic-scene .f15 { transform: rotate3d(-1, 0, 0, 20.9051574deg) translateZ(-100px);}
.ic-scene .f16 { transform: rotate3d( 1, 0, 0, 20.9051574deg) translateZ(-100px);}
.ic-scene .f17 { transform: rotate3d(2.6180339887, -1, 0, 90deg) translateZ(100px);}
.ic-scene .f18 { transform: rotate3d(2.6180339887,  1, 0, 90deg) translateZ(100px);}
.ic-scene .f19 { transform: rotate3d(2.6180339887, -1, 0, 90deg) translateZ(-100px);}
.ic-scene .f20 { transform: rotate3d(2.6180339887,  1, 0, 90deg) translateZ(-100px);}

.ic-scene .tri-inner-container {
width: 200px;
height: 200px;
}
.ic-scene .tri-inner {
top: calc(((200px - 114.75px) / 2) - 19.25px);
left: calc((200px - 132.501886779px) / 2);
position: absolute;
width: 0;
height: 0;
border-bottom: 114.75px solid red;
border-left: 66.2509433895px solid transparent;
border-right: 66.2509433895px solid transparent;
/*width: 132.501886779px;
height: 114.75px;
clip-path: polygon( 50% 0, 100% 100%, 0 100%);*/
}
.ic-scene .f01 .tri-inner {border-bottom-color: rgba(255,0,  0,  0.5);}
.ic-scene .f02 .tri-inner {border-bottom-color: rgba(255,255,0,  0.5);}
.ic-scene .f03 .tri-inner {border-bottom-color: rgba(0,  255,0,  0.5);}
.ic-scene .f04 .tri-inner {border-bottom-color: rgba(0,  255,255,0.5);}
.ic-scene .f05 .tri-inner {border-bottom-color: rgba(0,  0,  255,0.5);}
.ic-scene .f06 .tri-inner {border-bottom-color: rgba(255,0,  255,0.5);}
.ic-scene .f07 .tri-inner {border-bottom-color: rgba(255,255,0,  0.5);}
.ic-scene .f08 .tri-inner {border-bottom-color: rgba(0,  255,0,  0.5);}
.ic-scene .f09 .tri-inner {border-bottom-color: rgba(0,  255,255,0.5);}
.ic-scene .f10 .tri-inner {border-bottom-color: rgba(0,  0,  255,0.5);}
.ic-scene .f11 .tri-inner {border-bottom-color: rgba(255,0,  255,0.5);}
.ic-scene .f12 .tri-inner {border-bottom-color: rgba(255,0,  0,  0.5);}
.ic-scene .f13 .tri-inner {border-bottom-color: rgba(255,255,0,  0.5);}
.ic-scene .f14 .tri-inner {border-bottom-color: rgba(0,  255,0,  0.5);}
.ic-scene .f15 .tri-inner {border-bottom-color: rgba(0,  255,255,0.5);}
.ic-scene .f16 .tri-inner {border-bottom-color: rgba(0,  0,  255,0.5);}
.ic-scene .f17 .tri-inner {border-bottom-color: rgba(255,0,  255,0.5);}
.ic-scene .f18 .tri-inner {border-bottom-color: rgba(255,255,0,  0.5);}
.ic-scene .f19 .tri-inner {border-bottom-color: rgba(0,  255,0,  0.5);}
.ic-scene .f20 .tri-inner {border-bottom-color: rgba(0,  255,255,0.5);}

.ic-scene .f01 .tri-inner-container {transform:rotate(67.25deg);} /*?*/
.ic-scene .f02 .tri-inner-container {transform:rotate(-7.25deg);} /*?*/
.ic-scene .f03 .tri-inner-container {transform:rotate(52.75deg);} /*?*/
.ic-scene .f04 .tri-inner-container {transform:rotate(7.25deg);} /*?*/
.ic-scene .f05 .tri-inner-container {transform:rotate(7.25deg);} /*?*/
.ic-scene .f06 .tri-inner-container {transform:rotate(52.75deg);} /*?*/
.ic-scene .f07 .tri-inner-container {transform:rotate(-7.25deg);} /*?*/
.ic-scene .f08 .tri-inner-container {transform:rotate(67.25deg);} /*?*/

.ic-scene .f09 .tri-inner-container {transform:rotate(-30deg);}
.ic-scene .f10 .tri-inner-container {transform:rotate(30deg);}
.ic-scene .f11 .tri-inner-container {transform:rotate(30deg);}
.ic-scene .f12 .tri-inner-container {transform:rotate(-30deg);}

.ic-scene .f13 .tri-inner-container {transform:rotate(180deg);}
.ic-scene .f16 .tri-inner-container {transform:rotate(180deg);}

.ic-scene .f17 .tri-inner-container {transform:rotate(9deg);} /*?*/
.ic-scene .f18 .tri-inner-container {transform:rotate(-9deg);} /*?*/
.ic-scene .f19 .tri-inner-container {transform:rotate(189deg);} /*?*/
.ic-scene .f20 .tri-inner-container {transform:rotate(171deg);} /*?*/

@keyframes rotatey {
0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
100% { transform: rotateX(1turn) rotateY(2turn) rotateZ(3turn); }
}
}}
<div class="ic-scene">
	<div class="icosahedron">
		<div class="triangle f01"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f02"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f03"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f04"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f05"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f06"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f07"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f08"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f09"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f10"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f11"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f12"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f13"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f14"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f15"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f16"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f17"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f18"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f19"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
		<div class="triangle f20"><div class="tri-inner-container"><div class="tri-inner"></div></div></div>
	</div>
</div>
[[Category:Pages containing a rotating css icosahedron]]<noinclude>[[Category:Rotating css polytopes]][[Category:Shapes]]</noinclude>