Rotating CSS Tesseract Jr.: Difference between revisions
Jump to navigation
Jump to search
Pseudosphere (talk | contribs) No edit summary |
Pseudosphere (talk | contribs) (Undo revision 646 by Pseudosphere (talk)) Tag: Undo |
||
(3 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
{{JuniorPage}}{{#css:.scene{height:200px;margin:100px;perspective:600px;transform:scale(0.5);width:200px | {{JuniorPage}}{{#css:.scene{height:200px;margin:100px;perspective:600px;transform:scale(0.5);width:200px}.tc{height:100%;position:absolute;transform-style:preserve-3d;width:100%}.rf,.rr,.rb,.rl,.rt,.rm{height:200px;position:absolute;width:200px}.t{animation:8s linear infinite rotateyly !important;height:100%;position:relative;transform-style:preserve-3d;width:100%}.rf{transform:rotateY(0deg)translateZ(100px)}.rr{transform:rotateY(90deg)translateZ(100px)}.rb{transform:rotateY(180deg)translateZ(100px)}.rl{transform:rotateY(-90deg)translateZ(100px)}.rt{transform:rotateX(90deg)translateZ(100px)}.rm{transform:rotateX(-90deg)translateZ(100px)}@keyframes rotateyly{0%{transform:rotate3d(-1,1,0,45deg)rotateX(0turn)}100%{transform:rotate3d(-1,1,0,45deg)rotateX(1turn)} | ||
}@keyframes | }@keyframes cf{100%,0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}4.167%{transform:matrix3d(0.965926,0,0,0.001294,0,1,0,0,0,0,1,0,25.8819,0,0,1.017037)}8.333%{transform:matrix3d(0.866025,0,0,0.0025,0,1,0,0,0,0,1,0,50,0,0,1.066987)}12.5%{transform:matrix3d(0.707107,0,0,0.003536,0,1,0,0,0,0,1,0,70.71068,0,0,1.146447)}16.667%{transform:matrix3d(0.5,0,0,0.00433,0,1,0,0,0,0,1,0,86.60254,0,0,1.25)}20.833%{transform:matrix3d(0.258819,0,0,0.00483,0,1,0,0,0,0,1,0,96.59258,0,0,1.37059)}25%{transform:matrix3d(0,0,0,0.005,0,1,0,0,0,0,1,0,100,0,0,1.5)}29.167%{transform:matrix3d(-0.258819,0,0,0.00483,0,1,0,0,0,0,1,0,96.59258,0,0,1.62941)}33.333%{transform:matrix3d(-0.5,0,0,0.00433,0,1,0,0,0,0,1,0,86.60254,0,0,1.75)}37.5%{transform:matrix3d(-0.707107,0,0,0.003536,0,1,0,0,0,0,1,0,70.71068,0,0,1.853553)}41.667%{transform:matrix3d(-0.866025,0,0,0.0025,0,1,0,0,0,0,1,0,50,0,0,1.933013)}45.833%{transform:matrix3d(-0.965926,0,0,0.001294,0,1,0,0,0,0,1,0,25.8819,0,0,1.982963)}50%{transform:matrix3d(-1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,2)}54.167%{transform:matrix3d(-0.965926,0,0,-0.001294,0,1,0,0,0,0,1,0,-25.8819,0,0,1.982963)}58.333%{transform:matrix3d(-0.866025,0,0,-0.0025,0,1,0,0,0,0,1,0,-50,0,0,1.933013)}62.5%{transform:matrix3d(-0.707107,0,0,-0.003536,0,1,0,0,0,0,1,0,-70.71068,0,0,1.853553)}66.667%{transform:matrix3d(-0.5,0,0,-0.00433,0,1,0,0,0,0,1,0,-86.60254,0,0,1.75)}70.833%{transform:matrix3d(-0.258819,0,0,-0.00483,0,1,0,0,0,0,1,0,-96.59258,0,0,1.62941)}75%{transform:matrix3d(0,0,0,-0.005,0,1,0,0,0,0,1,0,-100,0,0,1.5)}79.167%{transform:matrix3d(0.258819,0,0,-0.00483,0,1,0,0,0,0,1,0,-96.59258,0,0,1.37059)}83.333%{transform:matrix3d(0.5,0,0,-0.00433,0,1,0,0,0,0,1,0,-86.60254,0,0,1.25)}87.5%{transform:matrix3d(0.707107,0,0,-0.003536,0,1,0,0,0,0,1,0,-70.71068,0,0,1.146447)}91.667%{transform:matrix3d(0.866025,0,0,-0.0025,0,1,0,0,0,0,1,0,-50,0,0,1.066987)}95.833%{transform:matrix3d(0.965926,0,0,-0.001294,0,1,0,0,0,0,1,0,-25.8819,0,0,1.017037)} | ||
}@keyframes cr{100%,0%{transform:matrix3d(0,0,0,0.005,0,0,-1,0,0,1,0,0,100,0,0,1.5)}4.167%{transform:matrix3d(-0.258819,0,0,0.00483,0,0,-1,0,0,1,0,0,96.59258,0,0,1.62941)}8.333%{transform:matrix3d(-0.5,0,0,0.00433,0,0,-1,0,0,1,0,0,86.60254,0,0,1.75)}12.5%{transform:matrix3d(-0.707107,0,0,0.003536,0,0,-1,0,0,1,0,0,70.71068,0,0,1.853553)}16.667%{transform:matrix3d(-0.866025,0,0,0.0025,0,0,-1,0,0,1,0,0,50,0,0,1.933013)}20.833%{transform:matrix3d(-0.965926,0,0,0.001294,0,0,-1,0,0,1,0,0,25.8819,0,0,1.982963)}25%{transform:matrix3d(-1,0,0,0,0,0,-1,0,0,1,0,0,0,0,0,2)}29.167%{transform:matrix3d(-0.965926,0,0,-0.001294,0,0,-1,0,0,1,0,0,-25.8819,0,0,1.982963)}33.333%{transform:matrix3d(-0.866025,0,0,-0.0025,0,0,-1,0,0,1,0,0,-50,0,0,1.933013)}37.5%{transform:matrix3d(-0.707107,0,0,-0.003536,0,0,-1,0,0,1,0,0,-70.71068,0,0,1.853553)}41.667%{transform:matrix3d(-0.5,0,0,-0.00433,0,0,-1,0,0,1,0,0,-86.60254,0,0,1.75)}45.833%{transform:matrix3d(-0.258819,0,0,-0.00483,0,0,-1,0,0,1,0,0,-96.59258,0,0,1.62941)}50%{transform:matrix3d(0,0,0,-0.005,0,0,-1,0,0,1,0,0,-100,0,0,1.5)}54.167%{transform:matrix3d(0.258819,0,0,-0.00483,0,0,-1,0,0,1,0,0,-96.59258,0,0,1.37059)}58.333%{transform:matrix3d(0.5,0,0,-0.00433,0,0,-1,0,0,1,0,0,-86.60254,0,0,1.25)}62.5%{transform:matrix3d(0.707107,0,0,-0.003536,0,0,-1,0,0,1,0,0,-70.71068,0,0,1.146447)}66.667%{transform:matrix3d(0.866025,0,0,-0.0025,0,0,-1,0,0,1,0,0,-50,0,0,1.066987)}70.833%{transform:matrix3d(0.965926,0,0,-0.001294,0,0,-1,0,0,1,0,0,-25.8819,0,0,1.017037)}75%{transform:matrix3d(1,0,0,0,0,0,-1,0,0,1,0,0,0,0,0,1)}79.167%{transform:matrix3d(0.965926,0,0,0.001294,0,0,-1,0,0,1,0,0,25.8819,0,0,1.017037)}83.333%{transform:matrix3d(0.866025,0,0,0.0025,0,0,-1,0,0,1,0,0,50,0,0,1.066987)}87.5%{transform:matrix3d(0.707107,0,0,0.003536,0,0,-1,0,0,1,0,0,70.71068,0,0,1.146447)}91.667%{transform:matrix3d(0.5,0,0,0.00433,0,0,-1,0,0,1,0,0,86.60254,0,0,1.25)}95.833%{transform:matrix3d(0.258819,0,0,0.00483,0,0,-1,0,0,1,0,0,96.59258,0,0,1.37059)} | |||
}@keyframes cb{100%,0%{transform:matrix3d(-1,0,0,0,0,-1,0,0,0,0,-1,0,0,0,0,2)}4.167%{transform:matrix3d(-0.965926,0,0,-0.001294,0,-1,0,0,0,0,-1,0,-25.8819,0,0,1.982963)}8.333%{transform:matrix3d(-0.866025,0,0,-0.0025,0,-1,0,0,0,0,-1,0,-50,0,0,1.933013)}12.5%{transform:matrix3d(-0.707107,0,0,-0.003536,0,-1,0,0,0,0,-1,0,-70.71068,0,0,1.853553)}16.667%{transform:matrix3d(-0.5,0,0,-0.00433,0,-1,0,0,0,0,-1,0,-86.60254,0,0,1.75)}20.833%{transform:matrix3d(-0.258819,0,0,-0.00483,0,-1,0,0,0,0,-1,0,-96.59258,0,0,1.62941)}25%{transform:matrix3d(0,0,0,-0.005,0,-1,0,0,0,0,-1,0,-100,0,0,1.5)}29.167%{transform:matrix3d(0.258819,0,0,-0.00483,0,-1,0,0,0,0,-1,0,-96.59258,0,0,1.37059)}33.333%{transform:matrix3d(0.5,0,0,-0.00433,0,-1,0,0,0,0,-1,0,-86.60254,0,0,1.25)}37.5%{transform:matrix3d(0.707107,0,0,-0.003536,0,-1,0,0,0,0,-1,0,-70.71068,0,0,1.146447)}41.667%{transform:matrix3d(0.866025,0,0,-0.0025,0,-1,0,0,0,0,-1,0,-50,0,0,1.066987)}45.833%{transform:matrix3d(0.965926,0,0,-0.001294,0,-1,0,0,0,0,-1,0,-25.8819,0,0,1.017037)}50%{transform:matrix3d(1,0,0,0,0,-1,0,0,0,0,-1,0,0,0,0,1)}54.167%{transform:matrix3d(0.965926,0,0,0.001294,0,-1,0,0,0,0,-1,0,25.8819,0,0,1.017037)}58.333%{transform:matrix3d(0.866025,0,0,0.0025,0,-1,0,0,0,0,-1,0,50,0,0,1.066987)}62.5%{transform:matrix3d(0.707107,0,0,0.003536,0,-1,0,0,0,0,-1,0,70.71068,0,0,1.146447)}66.667%{transform:matrix3d(0.5,0,0,0.00433,0,-1,0,0,0,0,-1,0,86.60254,0,0,1.25)}70.833%{transform:matrix3d(0.258819,0,0,0.00483,0,-1,0,0,0,0,-1,0,96.59258,0,0,1.37059)}75%{transform:matrix3d(0,0,0,0.005,0,-1,0,0,0,0,-1,0,100,0,0,1.5)}79.167%{transform:matrix3d(-0.258819,0,0,0.00483,0,-1,0,0,0,0,-1,0,96.59258,0,0,1.62941)}83.333%{transform:matrix3d(-0.5,0,0,0.00433,0,-1,0,0,0,0,-1,0,86.60254,0,0,1.75)}87.5%{transform:matrix3d(-0.707107,0,0,0.003536,0,-1,0,0,0,0,-1,0,70.71068,0,0,1.853553)}91.667%{transform:matrix3d(-0.866025,0,0,0.0025,0,-1,0,0,0,0,-1,0,50,0,0,1.933013)}95.833%{transform:matrix3d(-0.965926,0,0,0.001294,0,-1,0,0,0,0,-1,0,25.8819,0,0,1.982963)} | |||
}@keyframes | }@keyframes cl{100%,0%{transform:matrix3d(0,0,0,-0.005,0,0,1,0,0,-1,0,0,-100,0,0,1.5)}4.167%{transform:matrix3d(0.258819,0,0,-0.00483,0,0,1,0,0,-1,0,0,-96.59258,0,0,1.37059)}8.333%{transform:matrix3d(0.5,0,0,-0.00433,0,0,1,0,0,-1,0,0,-86.60254,0,0,1.25)}12.5%{transform:matrix3d(0.707107,0,0,-0.003536,0,0,1,0,0,-1,0,0,-70.71068,0,0,1.146447)}16.667%{transform:matrix3d(0.866025,0,0,-0.0025,0,0,1,0,0,-1,0,0,-50,0,0,1.066987)}20.833%{transform:matrix3d(0.965926,0,0,-0.001294,0,0,1,0,0,-1,0,0,-25.8819,0,0,1.017037)}25%{transform:matrix3d(1,0,0,0,0,0,1,0,0,-1,0,0,0,0,0,1)}29.167%{transform:matrix3d(0.965926,0,0,0.001294,0,0,1,0,0,-1,0,0,25.8819,0,0,1.017037)}33.333%{transform:matrix3d(0.866025,0,0,0.0025,0,0,1,0,0,-1,0,0,50,0,0,1.066987)}37.5%{transform:matrix3d(0.707107,0,0,0.003536,0,0,1,0,0,-1,0,0,70.71068,0,0,1.146447)}41.667%{transform:matrix3d(0.5,0,0,0.00433,0,0,1,0,0,-1,0,0,86.60254,0,0,1.25)}45.833%{transform:matrix3d(0.258819,0,0,0.00483,0,0,1,0,0,-1,0,0,96.59258,0,0,1.37059)}50%{transform:matrix3d(0,0,0,0.005,0,0,1,0,0,-1,0,0,100,0,0,1.5)}54.167%{transform:matrix3d(-0.258819,0,0,0.00483,0,0,1,0,0,-1,0,0,96.59258,0,0,1.62941)}58.333%{transform:matrix3d(-0.5,0,0,0.00433,0,0,1,0,0,-1,0,0,86.60254,0,0,1.75)}62.5%{transform:matrix3d(-0.707107,0,0,0.003536,0,0,1,0,0,-1,0,0,70.71068,0,0,1.853553)}66.667%{transform:matrix3d(-0.866025,0,0,0.0025,0,0,1,0,0,-1,0,0,50,0,0,1.933013)}70.833%{transform:matrix3d(-0.965926,0,0,0.001294,0,0,1,0,0,-1,0,0,25.8819,0,0,1.982963)}75%{transform:matrix3d(-1,0,0,0,0,0,1,0,0,-1,0,0,0,0,0,2)}79.167%{transform:matrix3d(-0.965926,0,0,-0.001294,0,0,1,0,0,-1,0,0,-25.8819,0,0,1.982963)}83.333%{transform:matrix3d(-0.866025,0,0,-0.0025,0,0,1,0,0,-1,0,0,-50,0,0,1.933013)}87.5%{transform:matrix3d(-0.707107,0,0,-0.003536,0,0,1,0,0,-1,0,0,-70.71068,0,0,1.853553)}91.667%{transform:matrix3d(-0.5,0,0,-0.00433,0,0,1,0,0,-1,0,0,-86.60254,0,0,1.75)}95.833%{transform:matrix3d(-0.258819,0,0,-0.00483,0,0,1,0,0,-1,0,0,-96.59258,0,0,1.62941)} | ||
} | } | ||
}}<div class="scene"><div class=" | }}<div class="scene"><div class="t"><div class="tc" style="animation:8s step-end infinite cf !important"><div class="rf" style="background:#75A7"></div><div class="rb" style="background:#5427"></div><div class="rr" style="background:#0C37"></div><div class="rl" style="background:#1B77"></div><div class="rt" style="background:#0457"></div><div class="rm" style="background:#5337"></div></div><div class="tc" style="animation:8s step-end infinite cr !important"><div class="rf" style="background:#0477"></div><div class="rb" style="background:#FD27"></div><div class="rt" style="background:#7B37"></div><div class="rm" style="background:#0F47"></div></div><div class="tc" style="animation:8s step-end infinite cb !important"><div class="rf" style="background:#34E7"></div><div class="rb" style="background:#3E97"></div><div class="rr" style="background:#A6B7"></div><div class="rl" style="background:#4107"></div><div class="rt" style="background:#F987"></div><div class="rm" style="background:#EAD7"></div></div><div class="tc" style="animation:8s step-end infinite cl !important"><div class="rf" style="background:#F857"></div><div class="rb" style="background:#13D7"></div><div class="rt" style="background:#FE97"></div><div class="rm" style="background:#E8E7"></div></div></div></div> |