View source for Hyperrotating CSS Order-5 Square Tiling

<noinclude>{{Distinguish|Rotating CSS Square Tiling}}</noinclude>{{#css:
.hyp-scene {
border-radius: 100%;
height: 200px;
margin: 100px;
outline: 2px solid #000;
overflow: hidden;
perspective: 100px;
width: 200px;
}

.hyp-scene .unsetup {
height: 100%;
position: relative;
transform: translateZ(100px) rotateY(-45deg);
transform-style: preserve-3d;
width: 100%;
}
.tess-4-5 {
animation: 4s linear infinite hyp;
height: 100%;
position: relative;
transform-style: preserve-3d;
width: 100%;
}
.hyp-scene .setup {
height: 100%;
position: relative;
transform: rotateY(45deg);
transform-style: preserve-3d;
width: 100%;
}
.tess-4-5 .square {
width: 200px;
height: 200px;
position: absolute;
}

.tess-4-5 .f00 {
background-color: #F007;
transform: translateZ(-205.817102727px);
}

.tess-4-5 .f01 {
background-color: #0F07;
transform: matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f02 {
background-color: #00F7;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f03 {
background-color: #0F07;
transform: matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f04 {
background-color: #00F7;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}

.tess-4-5 .f05 {
background-color: #FF07;
transform: matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f06 {
background-color: #F0F7;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f07 {
background-color: #F0F7;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f08 {
background-color: #FF07;
transform: matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f09 {
background-color: #FF07;
transform: matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f10 {
background-color: #F0F7;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f11 {
background-color: #F0F7;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f12 {
background-color: #FF07;
transform: matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}

.tess-4-5 .f13 {
background-color: #F007;
transform: matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f14 {
background-color: #F007;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f15 {
background-color: #F007;
transform: matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f16 {
background-color: #F007;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}

.tess-4-5 .f17 {
background-color: #00F7;
transform: matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f18 {
background-color: #F0F7;
transform: matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f19 {
background-color: #0F07;
transform: matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f20 {
background-color: #00F7;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f21 {
background-color: #FF07;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f22 {
background-color: #0F07;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f23 {
background-color: #0F07;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f24 {
background-color: #FF07;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f25 {
background-color: #00F7;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f26 {
background-color: #0F07;
transform: matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f27 {
background-color: #F0F7;
transform: matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f28 {
background-color: #00F7;
transform: matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f29 {
background-color: #00F7;
transform: matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f30 {
background-color: #F0F7;
transform: matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f31 {
background-color: #0F07;
transform: matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f32 {
background-color: #00F7;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f33 {
background-color: #FF07;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f34 {
background-color: #0F07;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, 1.27201964951, 0, 0, 1, 0, 0, 1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f35 {
background-color: #0F07;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f36 {
background-color: #FF07;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f37 {
background-color: #00F7;
transform: matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f38 {
background-color: #0F07;
transform: matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f39 {
background-color: #F0F7;
transform: matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f40 {
background-color: #00F7;
transform: matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}

.tess-4-5 .f41 {
background-color: #0F07;
transform: matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}

.tess-4-5 .f42 {
background-color: #FF07;
transform: matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f43 {
background-color: #F0F7;
transform: matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, 1.27201964951, 0, 0, 1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f44 {
background-color: #F0F7;
transform: matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}
.tess-4-5 .f45 {
background-color: #FF07;
transform: matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1.61803398875, 0, -1.27201964951, 0, 0, 1, 0, 0, -1.27201964951, 0, 1.61803398875, 0, 0, 0, 0, 1) matrix3d(1, 0, 0, 0, 0, 1.61803398875, -1.27201964951, 0, 0, -1.27201964951, 1.61803398875, 0, 0, 0, 0, 1) translateZ(-205.817102727px);
}

@keyframes hyp {
0% {
transform: scale3d(1, 1, 1);
}
12.5% {
transform: scale3d(1.3038465308, 1, 0.76696143018);
}
25% {
transform: scale3d(1.70001577589, 1, 0.588229835384);
}
37.5% {
transform: scale3d(2.2165596717, 1, 0.451149595821);
}
50% {
transform: scale3d(2.89005363826, 1, 0.346014339236);
}
62.5% {
transform: scale3d(3.76818641008, 1, 0.265379652483);
}
75% {
transform: scale3d(4.91313677821, 1, 0.203535957809);
}
87.5% {
transform: scale3d(6.40597634363, 1, 0.156104229294);
}
100% {
transform: scale3d(8.35241003204, 1, 0.119725922957);
}
}
}}
<div class="hyp-scene">
<div class="unsetup">
<div class="tess-4-5">
<div class="setup">
<div class="square f00"></div>
<div class="square f01"></div>
<div class="square f02"></div>
<div class="square f03"></div>
<div class="square f04"></div>
<div class="square f05"></div>
<div class="square f06"></div>
<div class="square f07"></div>
<div class="square f08"></div>
<div class="square f09"></div>
<div class="square f10"></div>
<div class="square f11"></div>
<div class="square f12"></div>
<div class="square f13"></div>
<div class="square f14"></div>
<div class="square f15"></div>
<div class="square f16"></div>
<div class="square f17"></div>
<div class="square f18"></div>
<div class="square f19"></div>
<div class="square f20"></div>
<div class="square f21"></div>
<div class="square f22"></div>
<div class="square f23"></div>
<div class="square f24"></div>
<div class="square f25"></div>
<div class="square f26"></div>
<div class="square f27"></div>
<div class="square f28"></div>
<div class="square f29"></div>
<div class="square f30"></div>
<div class="square f31"></div>
<div class="square f32"></div>
<div class="square f33"></div>
<div class="square f34"></div>
<div class="square f35"></div>
<div class="square f36"></div>
<div class="square f37"></div>
<div class="square f38"></div>
<div class="square f39"></div>
<div class="square f40"></div>
<div class="square f41"></div>
<div class="square f42"></div>
<div class="square f43"></div>
<div class="square f44"></div>
<div class="square f45"></div>
</div>
</div>
</div>
</div>
[[Category:Pages containing a hyperrotating css order-5 square tiling]]<noinclude>[[Category:Pages which use over 10 kilobytes of CSS]][[Category:Rotating css polytopes]][[Category:Pages containing a hyperbolic plane]]</noinclude>