View source for User:Pseudosphere/Test Page

{{Mono Dark}}{{#css:
.hyp-scene {
border-radius: 100%;
height: 200px;
margin: 100px;
outline: 2px solid #000;
overflow: hidden;
perspective: 100px;
width: 200px;
}

.orb-_245 {
height: 100%;
position: relative;
transform: translateZ(100px);
transform-style: preserve-3d;
width: 100%;
}
.orb-_245 .square {
width: 200px;
height: 200px;
position: absolute;
}

.orb-_245 .f00 {
transform: translateZ(-205.817102727px);
}

.orb-_245 .f01 {
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);
}
.orb-_245 .f02 {
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);
}
.orb-_245 .f03 {
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);
}
.orb-_245 .f04 {
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);
}

.orb-_245 .f05 {
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);
}
.orb-_245 .f06 {
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);
}
.orb-_245 .f07 {
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);
}
.orb-_245 .f08 {
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);
}
.orb-_245 .f09 {
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);
}
.orb-_245 .f10 {
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);
}
.orb-_245 .f11 {
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);
}
.orb-_245 .f12 {
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);
}

.orb-_245 .f13 {
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);
}
.orb-_245 .f14 {
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);
}
.orb-_245 .f15 {
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);
}
.orb-_245 .f16 {
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);
}

.orb-_245 .f17 {
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);
}
.orb-_245 .f18 {
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);
}
.orb-_245 .f19 {
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);
}
.orb-_245 .f20 {
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);
}
.orb-_245 .f21 {
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);
}
.orb-_245 .f22 {
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);
}
.orb-_245 .f23 {
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);
}
.orb-_245 .f24 {
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);
}
.orb-_245 .f25 {
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);
}
.orb-_245 .f26 {
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);
}
.orb-_245 .f27 {
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);
}
.orb-_245 .f28 {
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);
}
.orb-_245 .f29 {
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);
}
.orb-_245 .f30 {
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);
}
.orb-_245 .f31 {
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);
}
.orb-_245 .f32 {
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);
}
.orb-_245 .f33 {
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);
}
.orb-_245 .f34 {
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);
}
.orb-_245 .f35 {
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);
}
.orb-_245 .f36 {
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);
}
.orb-_245 .f37 {
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);
}
.orb-_245 .f38 {
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);
}
.orb-_245 .f39 {
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);
}
.orb-_245 .f40 {
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);
}

.orb-_245 .tri {
clip-path: polygon(50% 50%, 100% 50%, 100% 0%);
height: 100%;
position: absolute;
width: 100%;
}
.orb-_245 .t0, .orb-_245 .t2, .orb-_245 .t4, .orb-_245 .t6 {
background-color: #F007;
}
.orb-_245 .t1, .orb-_245 .t3, .orb-_245 .t5, .orb-_245 .t7 {
background-color: #0FF7;
}
.orb-_245 .t1 {
transform: matrix(0, -1, -1, 0, 0, 0);
}
.orb-_245 .t2 {
transform: matrix(0, -1, 1, 0, 0, 0);
}
.orb-_245 .t3 {
transform: matrix(-1, 0, 0, 1, 0, 0);
}
.orb-_245 .t4 {
transform: matrix(-1, 0, 0, -1, 0, 0);
}
.orb-_245 .t5 {
transform: matrix(0, 1, 1, 0, 0, 0);
}
.orb-_245 .t6 {
transform: matrix(0, 1, -1, 0, 0, 0);
}
.orb-_245 .t7 {
transform: matrix(1, 0, 0, -1, 0, 0);
}
}}<div class="hyp-scene">
<div class="orb-_245">
<div class="square f00"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f01"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f02"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f03"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f04"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f05"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f06"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f07"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f08"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f09"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f10"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f11"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f12"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f13"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f14"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f15"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f16"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f17"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f18"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f19"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f20"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f21"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f22"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f23"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f24"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f25"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f26"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f27"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f28"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f29"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f30"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f31"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f32"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f33"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f34"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f35"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f36"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f37"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f38"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f39"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
<div class="square f40"><div class="tri t0"></div><div class="tri t1"></div><div class="tri t2"></div><div class="tri t3"></div><div class="tri t4"></div><div class="tri t5"></div><div class="tri t6"></div><div class="tri t7"></div></div>
</div>
</div>
{{#css:
.hyp-scene {
outline-color: #FFF;
}
}}{{#css:
.zoom {
animation: 4s linear zoomy infinite;
}
.zoom, .zoomed {
display: flex;
width: min-content;
}
.zoomed {
position: absolute;
transform: rotate(-0.25turn) scale(0.5);
transform-style: preserve-3d;
}
.zoomed img {
margin-left: 50%;
}

@keyframes zoomy {
0% {
transform: rotate(0turn) scale(1);
}
6.25% {
transform: rotate(0.0625turn) scale(1.189207115002721);
}
12.5% {
transform: rotate(0.125turn) scale(1.4142135623730951);
}
18.75% {
transform: rotate(0.1875turn) scale(1.681792830507429);
}
25% {
transform: rotate(0.25turn) scale(2);
}
31.25% {
transform: rotate(0.3125turn) scale(2.378414230005442);
}
37.5% {
transform: rotate(0.375turn) scale(2.8284271247461903);
}
43.75% {
transform: rotate(0.4375turn) scale(3.363585661014858);
}
50% {
transform: rotate(0.5turn) scale(4);
}
56.25% {
transform: rotate(0.5625turn) scale(4.756828460010884);
}
62.5% {
transform: rotate(0.625turn) scale(5.656854249492381);
}
68.75% {
transform: rotate(0.6875turn) scale(6.727171322029716);
}
75% {
transform: rotate(0.75turn) scale(8);
}
81.25% {
transform: rotate(0.8125turn) scale(9.513656920021768);
}
87.5% {
transform: rotate(0.875turn) scale(11.313708498984761);
}
93.75% {
transform: rotate(0.9375turn) scale(13.454342644059432);
}
100% {
transform: rotate(1turn) scale(16);
}
}
}}
<div class="mw-collapsible mw-collapsed">
<div style="overflow: hidden;">
<div class="zoom">
<div class="zoomed">
<div class="zoomed">
<div class="zoomed">
<div class="zoomed">
<div class="zoomed">
<div class="zoomed">
<div class="zoomed">
<div class="zoomed">
<div class="zoomed">
<div class="zoomed">
[[File:Ice_Cube_TPOT.png]]
</div>
[[File:Ice_Cube_TPOT.png]]
</div>
[[File:Ice_Cube_TPOT.png]]
</div>
[[File:Ice_Cube_TPOT.png]]
</div>
[[File:Ice_Cube_TPOT.png]]
</div>
[[File:Ice_Cube_TPOT.png]]
</div>
[[File:Ice_Cube_TPOT.png]]
</div>
[[File:Ice_Cube_TPOT.png]]
</div>
[[File:Ice_Cube_TPOT.png]]
</div>
[[File:Ice_Cube_TPOT.png]]
</div>
[[File:Ice_Cube_TPOT.png]]
</div>
</div>
{{#css:
.dimensional {
transform-style: preserve-3d;
}
.dimensional h2 {
transform: translateZ(16px);
}
.dimensional p {
transform: translateZ(-16px);
}
}}
</div>
{{Tesseract CSS}}{{#css:
.tesseract .triangle {
clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
height: 100%;
position: absolute;
width: 100%
}
.tesseract .f0 {
background-color: #0007;
transform: matrix3d(0.5, 0, -0.5, 0, 0, 0.5, -0.5, 0, 0, 0, 1, 0, 50, 50, 0, 1);
}
.tesseract .f1 {
background-color: #F007;
transform: matrix3d(0, 0.5, -0.5, 0, -0.5, 0, -0.5, 0, 0, 0, 1, 0, -50, 50, 0, 1);
}
.tesseract .f2 {
background-color: #0F07;
transform: matrix3d(0, -0.5, -0.5, 0, 0.5, 0, -0.5, 0, 0, 0, 1, 0, 50, -50, 0, 1);
}
.tesseract .f3 {
background-color: #FF07;
transform: matrix3d(0.5, 0, 0.5, 0, 0, 0.5, 0.5, 0, 0, 0, 1, 0, 50, 50, 0, 1);
}
.tesseract .f4 {
background-color: #00F7;
transform: matrix3d(-0.5, 0, -0.5, 0, 0, -0.5, -0.5, 0, 0, 0, 1, 0, -50, -50, 0, 1);
}
.tesseract .f5 {
background-color: #F0F7;
transform: matrix3d(0, 0.5, 0.5, 0, -0.5, 0, 0.5, 0, 0, 0, 1, 0, -50, 50, 0, 1);
}
.tesseract .f6 {
background-color: #0FF7;
transform: matrix3d(0, -0.5, 0.5, 0, 0.5, 0, 0.5, 0, 0, 0, 1, 0, 50, -50, 0, 1);
}
.tesseract .f7 {
background-color: #FFF7;
transform: matrix3d(-0.5, 0, 0.5, 0, 0, -0.5, 0.5, 0, 0, 0, 1, 0, -50, -50, 0, 1);
}
}}
<div class="scene mw-collapsible" id="mw-customcollapsible-foobar">
<div class="tesseract">
<div class="tesseract-cell-front">
<div class="triangle f0"></div>
<div class="triangle f1"></div>
<div class="triangle f2"></div>
<div class="triangle f3"></div>
<div class="triangle f4"></div>
<div class="triangle f5"></div>
<div class="triangle f6"></div>
<div class="triangle f7"></div>
</div>
<div class="tesseract-cell-right">
<div class="triangle f0"></div>
<div class="triangle f1"></div>
<div class="triangle f2"></div>
<div class="triangle f3"></div>
<div class="triangle f4"></div>
<div class="triangle f5"></div>
<div class="triangle f6"></div>
<div class="triangle f7"></div>
</div>
<div class="tesseract-cell-back">
<div class="triangle f0"></div>
<div class="triangle f1"></div>
<div class="triangle f2"></div>
<div class="triangle f3"></div>
<div class="triangle f4"></div>
<div class="triangle f5"></div>
<div class="triangle f6"></div>
<div class="triangle f7"></div>
</div>
<div class="tesseract-cell-left">
<div class="triangle f0"></div>
<div class="triangle f1"></div>
<div class="triangle f2"></div>
<div class="triangle f3"></div>
<div class="triangle f4"></div>
<div class="triangle f5"></div>
<div class="triangle f6"></div>
<div class="triangle f7"></div>
</div>
</div>
</div>
{{#css:
.win-toggle {
align-items: center;
border: 2px solid #CCC;
border-radius: 10px;
box-sizing: border-box;
display: inline-flex !important;
height: 20px;
width: 44px;
}
.win-toggle:hover {
border-color: #FFF;
}
.win-toggle:active {
background-color: #999 !important;
border-color: #999 !important;
}
.win-toggle[style="display: none;"] {
background-color: #29A0CC;
border-color: #29A0CC;
}
.win-toggle[style="display: none;"]:hover {
background-color: #2490B7;
border-color: #2490B7;
}
.win-toggle div {
background-color: #CCC;
border-radius: 5px;
height: 10px;
margin: 3px;
transition: margin-left 0.5s ease;
width: 10px;
}
.win-toggle:hover div {
background-color: #FFF;
}
.win-toggle[style="display: none;"] div {
background-color: #FFF;
margin-left: 27px;
}
}}
<div class="win-toggle mw-collapsible mw-customtoggle-foo mw-customtoggle-bar mw-customtoggle-foobar" id="mw-customcollapsible-foo"><div></div></div>
{{#css:
#mw-customcollapsible-bar, #mw-customcollapsible-foobar {
display: block !important;
}
#mw-customcollapsible-bar .tesseract, #mw-customcollapsible-foobar .tesseract {
transition: 1s;
}
#mw-customcollapsible-bar[style="display: none;"] .tesseract, #mw-customcollapsible-foobar[style="display: none;"] .tesseract {
animation: none;
}
}}
<div class="scene mw-collapsible" id="mw-customcollapsible-bar">
<div class="tesseract">
<div class="tesseract-cell-front">
<div class="ridge-front" style="background-color: #75A7;"></div>
<div class="ridge-back" style="background-color: #5427;"></div>
<div class="ridge-right" style="background-color: #0C37;"></div>
<div class="ridge-left" style="background-color: #1B77;"></div>
<div class="ridge-top" style="background-color: #0457;"></div>
<div class="ridge-bottom" style="background-color: #5337;"></div>
</div>
<div class="tesseract-cell-right">
<div class="ridge-front" style="background-color: #0477;"></div>
<div class="ridge-back" style="background-color: #FD27;"></div>
<div class="ridge-top" style="background-color: #7B37;"></div>
<div class="ridge-bottom" style="background-color: #0F47;"></div>
</div>
<div class="tesseract-cell-back">
<div class="ridge-front" style="background-color: #34E7;"></div>
<div class="ridge-back" style="background-color: #3E97;"></div>
<div class="ridge-right" style="background-color: #A6B7;"></div>
<div class="ridge-left" style="background-color: #4107;"></div>
<div class="ridge-top" style="background-color: #F987;"></div>
<div class="ridge-bottom" style="background-color: #EAD7;"></div>
</div>
<div class="tesseract-cell-left">
<div class="ridge-front" style="background-color: #F857;"></div>
<div class="ridge-back" style="background-color: #13D7;"></div>
<div class="ridge-top" style="background-color: #FE97;"></div>
<div class="ridge-bottom" style="background-color: #E8E7;"></div>
</div>
</div>
</div>
<code><nowiki>\{\{#if:\{\{\{[0-9]+\|?\|\}\}\}\|\{\{\{[0-9]+\}\}\}\|?|\}\}</nowiki></code>

<span class="mw-collapsible mw-customtoggle-qubit0 mw-customtoggle-qubit1" id="mw-customcollapsible-qubit0"><math>|0\rang</math></span><span class="mw-collapsible mw-collapsed mw-customtoggle-qubit1 mw-customtoggle-qubit2" id="mw-customcollapsible-qubit1"><math>\frac{|0\rang + |1\rang}{\sqrt{2}}</math></span><span class="mw-collapsible mw-collapsed mw-customtoggle-qubit2 mw-customtoggle-qubit3" id="mw-customcollapsible-qubit2"><math>|1\rang</math></span><span class="mw-collapsible mw-collapsed mw-customtoggle-qubit3 mw-customtoggle-qubit4" id="mw-customcollapsible-qubit3"><math>\frac{-|0\rang + |1\rang}{\sqrt{2}}</math></span><span class="mw-collapsible mw-collapsed mw-customtoggle-qubit4 mw-customtoggle-qubit5" id="mw-customcollapsible-qubit4"><math>-|0\rang</math></span><span class="mw-collapsible mw-collapsed mw-customtoggle-qubit5 mw-customtoggle-qubit6" id="mw-customcollapsible-qubit5"><math>\frac{-|0\rang - |1\rang}{\sqrt{2}}</math></span><span class="mw-collapsible mw-collapsed mw-customtoggle-qubit6 mw-customtoggle-qubit7" id="mw-customcollapsible-qubit6"><math>-|1\rang</math></span><span class="mw-collapsible mw-collapsed mw-customtoggle-qubit7 mw-customtoggle-qubit0" id="mw-customcollapsible-qubit7"><math>\frac{|0\rang - |1\rang}{\sqrt{2}}</math></span>

{{#css:
.gridstuff {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
height: 256px;
margin: 0;
width: 256px;
}
.bg {
position: absolute;
z-index: -1;
}
.bg *:last-child {
display: none;
}
.gridstuff *:nth-child(6):hover ~ .bg *:first-child {
display: none;
}
.gridstuff *:nth-child(6):hover ~ .bg *:last-child {
display: initial;
}
}}<p class="gridstuff">
<span style="background-color: #0004;"></span><span style="background-color: #4004;"></span><span style="background-color: #8004;"></span><span style="background-color: #C004;"></span>
<span style="background-color: #0404;"></span><span style="background-color: #4404;"></span><span style="background-color: #8404;"></span><span style="background-color: #C404;"></span>
<span style="background-color: #0804;"></span><span style="background-color: #4804;"></span><span style="background-color: #8804;"></span><span style="background-color: #C804;"></span>
<span style="background-color: #0C04;"></span><span style="background-color: #4C04;"></span><span style="background-color: #8C04;"></span><span style="background-color: #CC04;"></span>
<span class="bg">[[File:Niko2.png|256x256px|link=]][[File:Nikosus.png|256x256px|link=]]</span>
</p>
<code>lambda s: bytes(int(s[n : n + 8], 2) for n in range(0, len(s), 8))</code>
[[Category:Functional pages]]