Rotating CSS Tesseract Jr.: Difference between revisions
Jump to navigation
Jump to search
Pseudosphere (talk | contribs) (Created page with "{{JuniorPage}}{{#css:.scene{height:200px;margin:100px;perspective:600px;width:200px;}.tesseract-cell{height:100%;position:absolute;transform-style:preserve-3d;width:100%;}.ridge-front,.ridge-right,.ridge-back,.ridge-left,.ridge-top,.ridge-bottom{height:200px;position:absolute;width:200px;}.tesseract{animation:8s linear infinite rotateyly;height:100%;position:relative;transform-style:preserve-3d;width:100%;}.ridge-front{transform:rotateY(0deg)translateZ(100px);}.ridge-rig...") |
Pseudosphere (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
{{JuniorPage}}{{#css:.scene{height:200px;margin:100px;perspective:600px;width:200px;}.tesseract-cell{height:100%;position:absolute;transform-style:preserve-3d;width:100%;}.ridge-front,.ridge-right,.ridge-back,.ridge-left,.ridge-top,.ridge-bottom{height:200px;position:absolute;width:200px;}.tesseract{animation:8s linear infinite rotateyly;height:100%;position:relative;transform-style:preserve-3d;width:100%;}.ridge-front{transform:rotateY(0deg)translateZ(100px);}.ridge-right{transform:rotateY(90deg)translateZ(100px);}.ridge-back{transform:rotateY(180deg)translateZ(100px);}.ridge-left{transform:rotateY(-90deg)translateZ(100px);}.ridge-top{transform:rotateX(90deg)translateZ(100px);}.ridge-bottom{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);} | {{JuniorPage}}{{#css:.scene{height:200px;margin:100px;perspective:600px;transform:scale(0.5);width:200px;}.tesseract-cell{height:100%;position:absolute;transform-style:preserve-3d;width:100%;}.ridge-front,.ridge-right,.ridge-back,.ridge-left,.ridge-top,.ridge-bottom{height:200px;position:absolute;width:200px;}.tesseract{animation:8s linear infinite rotateyly;height:100%;position:relative;transform-style:preserve-3d;width:100%;}.ridge-front{transform:rotateY(0deg)translateZ(100px);}.ridge-right{transform:rotateY(90deg)translateZ(100px);}.ridge-back{transform:rotateY(180deg)translateZ(100px);}.ridge-left{transform:rotateY(-90deg)translateZ(100px);}.ridge-top{transform:rotateX(90deg)translateZ(100px);}.ridge-bottom{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 cell-front{100%,0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}6.25%{transform:matrix3d(0.9238795325112867,0,0,0.001913417161825449,0,1,0,0,0,0,1,0,38.268343236508976,0,0,1.0380602337443565);}12.5%{transform:matrix3d(0.7071067811865476,0,0,0.0035355339059327372,0,1,0,0,0,0,1,0,70.71067811865474,0,0,1.1464466094067263);}18.75%{transform:matrix3d(0.38268343236508984,0,0,0.004619397662556434,0,1,0,0,0,0,1,0,92.38795325112868,0,0,1.3086582838174552);}25%{transform:matrix3d(0,0,0,0.005,0,1,0,0,0,0,1,0,100,0,0,1.5);}31.25%{transform:matrix3d(-0.3826834323650897,0,0,0.004619397662556434,0,1,0,0,0,0,1,0,92.38795325112868,0,0,1.6913417161825448);}37.5%{transform:matrix3d(-0.7071067811865475,0,0,0.003535533905932738,0,1,0,0,0,0,1,0,70.71067811865476,0,0,1.8535533905932737);}43.75%{transform:matrix3d(-0.9238795325112867,0,0,0.0019134171618254495,0,1,0,0,0,0,1,0,38.26834323650899,0,0,1.9619397662556435);}50%{transform:matrix3d(-1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,2);}56.25%{transform:matrix3d(-0.9238795325112868,0,0,-0.0019134171618254484,0,1,0,0,0,0,1,0,-38.26834323650897,0,0,1.9619397662556435);}62.5%{transform:matrix3d(-0.7071067811865477,0,0,-0.0035355339059327372,0,1,0,0,0,0,1,0,-70.71067811865474,0,0,1.853553390593274);}68.75%{transform:matrix3d(-0.38268343236509034,0,0,-0.004619397662556432,0,1,0,0,0,0,1,0,-92.38795325112865,0,0,1.6913417161825453);}75%{transform:matrix3d(0,0,0,-0.005,0,1,0,0,0,0,1,0,-100,0,0,1.5);}81.25%{transform:matrix3d(0.38268343236509,0,0,-0.004619397662556433,0,1,0,0,0,0,1,0,-92.38795325112866,0,0,1.308658283817455);}87.5%{transform:matrix3d(0.7071067811865474,0,0,-0.0035355339059327385,0,1,0,0,0,0,1,0,-70.71067811865477,0,0,1.1464466094067263);}93.75%{transform:matrix3d(0.9238795325112865,0,0,-0.001913417161825452,0,1,0,0,0,0,1,0,-38.26834323650904,0,0,1.0380602337443567);} | }@keyframes cell-front{100%,0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}6.25%{transform:matrix3d(0.9238795325112867,0,0,0.001913417161825449,0,1,0,0,0,0,1,0,38.268343236508976,0,0,1.0380602337443565);}12.5%{transform:matrix3d(0.7071067811865476,0,0,0.0035355339059327372,0,1,0,0,0,0,1,0,70.71067811865474,0,0,1.1464466094067263);}18.75%{transform:matrix3d(0.38268343236508984,0,0,0.004619397662556434,0,1,0,0,0,0,1,0,92.38795325112868,0,0,1.3086582838174552);}25%{transform:matrix3d(0,0,0,0.005,0,1,0,0,0,0,1,0,100,0,0,1.5);}31.25%{transform:matrix3d(-0.3826834323650897,0,0,0.004619397662556434,0,1,0,0,0,0,1,0,92.38795325112868,0,0,1.6913417161825448);}37.5%{transform:matrix3d(-0.7071067811865475,0,0,0.003535533905932738,0,1,0,0,0,0,1,0,70.71067811865476,0,0,1.8535533905932737);}43.75%{transform:matrix3d(-0.9238795325112867,0,0,0.0019134171618254495,0,1,0,0,0,0,1,0,38.26834323650899,0,0,1.9619397662556435);}50%{transform:matrix3d(-1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,2);}56.25%{transform:matrix3d(-0.9238795325112868,0,0,-0.0019134171618254484,0,1,0,0,0,0,1,0,-38.26834323650897,0,0,1.9619397662556435);}62.5%{transform:matrix3d(-0.7071067811865477,0,0,-0.0035355339059327372,0,1,0,0,0,0,1,0,-70.71067811865474,0,0,1.853553390593274);}68.75%{transform:matrix3d(-0.38268343236509034,0,0,-0.004619397662556432,0,1,0,0,0,0,1,0,-92.38795325112865,0,0,1.6913417161825453);}75%{transform:matrix3d(0,0,0,-0.005,0,1,0,0,0,0,1,0,-100,0,0,1.5);}81.25%{transform:matrix3d(0.38268343236509,0,0,-0.004619397662556433,0,1,0,0,0,0,1,0,-92.38795325112866,0,0,1.308658283817455);}87.5%{transform:matrix3d(0.7071067811865474,0,0,-0.0035355339059327385,0,1,0,0,0,0,1,0,-70.71067811865477,0,0,1.1464466094067263);}93.75%{transform:matrix3d(0.9238795325112865,0,0,-0.001913417161825452,0,1,0,0,0,0,1,0,-38.26834323650904,0,0,1.0380602337443567);} | ||
}@keyframes cell-right{100%,0%{transform:matrix3d(0,0,0,0.005,0,0,-1,0,0,1,0,0,100,0,0,1.5);}6.25%{transform:matrix3d(-0.3826834323650897,0,0,0.004619397662556434,0,0,-1,0,0,1,0,0,92.38795325112868,0,0,1.6913417161825448);}12.5%{transform:matrix3d(-0.7071067811865475,0,0,0.003535533905932738,0,0,-1,0,0,1,0,0,70.71067811865476,0,0,1.8535533905932737);}18.75%{transform:matrix3d(-0.9238795325112867,0,0,0.0019134171618254495,0,0,-1,0,0,1,0,0,38.26834323650899,0,0,1.9619397662556435);}25%{transform:matrix3d(-1,0,0,0,0,0,-1,0,0,1,0,0,0,0,0,2);}31.25%{transform:matrix3d(-0.9238795325112868,0,0,-0.0019134171618254484,0,0,-1,0,0,1,0,0,-38.26834323650897,0,0,1.9619397662556435);}37.5%{transform:matrix3d(-0.7071067811865477,0,0,-0.0035355339059327372,0,0,-1,0,0,1,0,0,-70.71067811865474,0,0,1.853553390593274);}43.75%{transform:matrix3d(-0.38268343236509034,0,0,-0.004619397662556432,0,0,-1,0,0,1,0,0,-92.38795325112865,0,0,1.6913417161825453);}50%{transform:matrix3d(0,0,0,-0.005,0,0,-1,0,0,1,0,0,-100,0,0,1.5);}56.25%{transform:matrix3d(0.38268343236509,0,0,-0.004619397662556433,0,0,-1,0,0,1,0,0,-92.38795325112866,0,0,1.308658283817455);}62.5%{transform:matrix3d(0.7071067811865474,0,0,-0.0035355339059327385,0,0,-1,0,0,1,0,0,-70.71067811865477,0,0,1.1464466094067263);}68.75%{transform:matrix3d(0.9238795325112865,0,0,-0.001913417161825452,0,0,-1,0,0,1,0,0,-38.26834323650904,0,0,1.0380602337443567);}75%{transform:matrix3d(1,0,0,0,0,0,-1,0,0,1,0,0,0,0,0,1);}81.25%{transform:matrix3d(0.9238795325112867,0,0,0.0019134171618254497,0,0,-1,0,0,1,0,0,38.268343236509,0,0,1.0380602337443565);}87.5%{transform:matrix3d(0.7071067811865477,0,0,0.003535533905932737,0,0,-1,0,0,1,0,0,70.71067811865474,0,0,1.146446609406726);}93.75%{transform:matrix3d(0.38268343236509045,0,0,0.004619397662556432,0,0,-1,0,0,1,0,0,92.38795325112865,0,0,1.3086582838174547);} | }@keyframes cell-right{100%,0%{transform:matrix3d(0,0,0,0.005,0,0,-1,0,0,1,0,0,100,0,0,1.5);}6.25%{transform:matrix3d(-0.3826834323650897,0,0,0.004619397662556434,0,0,-1,0,0,1,0,0,92.38795325112868,0,0,1.6913417161825448);}12.5%{transform:matrix3d(-0.7071067811865475,0,0,0.003535533905932738,0,0,-1,0,0,1,0,0,70.71067811865476,0,0,1.8535533905932737);}18.75%{transform:matrix3d(-0.9238795325112867,0,0,0.0019134171618254495,0,0,-1,0,0,1,0,0,38.26834323650899,0,0,1.9619397662556435);}25%{transform:matrix3d(-1,0,0,0,0,0,-1,0,0,1,0,0,0,0,0,2);}31.25%{transform:matrix3d(-0.9238795325112868,0,0,-0.0019134171618254484,0,0,-1,0,0,1,0,0,-38.26834323650897,0,0,1.9619397662556435);}37.5%{transform:matrix3d(-0.7071067811865477,0,0,-0.0035355339059327372,0,0,-1,0,0,1,0,0,-70.71067811865474,0,0,1.853553390593274);}43.75%{transform:matrix3d(-0.38268343236509034,0,0,-0.004619397662556432,0,0,-1,0,0,1,0,0,-92.38795325112865,0,0,1.6913417161825453);}50%{transform:matrix3d(0,0,0,-0.005,0,0,-1,0,0,1,0,0,-100,0,0,1.5);}56.25%{transform:matrix3d(0.38268343236509,0,0,-0.004619397662556433,0,0,-1,0,0,1,0,0,-92.38795325112866,0,0,1.308658283817455);}62.5%{transform:matrix3d(0.7071067811865474,0,0,-0.0035355339059327385,0,0,-1,0,0,1,0,0,-70.71067811865477,0,0,1.1464466094067263);}68.75%{transform:matrix3d(0.9238795325112865,0,0,-0.001913417161825452,0,0,-1,0,0,1,0,0,-38.26834323650904,0,0,1.0380602337443567);}75%{transform:matrix3d(1,0,0,0,0,0,-1,0,0,1,0,0,0,0,0,1);}81.25%{transform:matrix3d(0.9238795325112867,0,0,0.0019134171618254497,0,0,-1,0,0,1,0,0,38.268343236509,0,0,1.0380602337443565);}87.5%{transform:matrix3d(0.7071067811865477,0,0,0.003535533905932737,0,0,-1,0,0,1,0,0,70.71067811865474,0,0,1.146446609406726);}93.75%{transform:matrix3d(0.38268343236509045,0,0,0.004619397662556432,0,0,-1,0,0,1,0,0,92.38795325112865,0,0,1.3086582838174547);} | ||