Rotation: Difference between revisions
Jump to navigation
Jump to search
Created page with "File:Maxwell.gif" |
m prevent silly janky scrollbar |
||
| (7 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
{{See also|Spinning}} | |||
[[File:Maxwell.gif]] | [[File:Maxwell.gif]] | ||
<div class="around">[[File:JankMan.svg|50px]]</div> | |||
{{Tombox | 1 = <div class="spin">I am currently in '''rotation'''.</div> | 3 = <div class="rotate">[[File:InfoTom.png|40px]]</div>}} | |||
{{#css: | |||
.rotate { | |||
animation-duration: 10s; | |||
animation-name: rotate; | |||
animation-iteration-count: infinite; | |||
animation-timing-function: linear; | |||
transform-origin: 20px 20px; | |||
} | |||
.spin { | |||
animation-duration: 6s; | |||
animation-name: spin; | |||
animation-iteration-count: infinite; | |||
animation-timing-function: linear; | |||
transform-origin: 8.5em; | |||
} | |||
.around { | |||
display: inline-block; | |||
animation-duration: 7s; | |||
animation-name: around; | |||
animation-iteration-count: infinite; | |||
animation-timing-function: linear; | |||
} | |||
span { | |||
animation-duration: 9s; | |||
animation-name: spin; | |||
animation-iteration-count: infinite; | |||
animation-timing-function: linear; | |||
} | |||
@keyframes rotate { | |||
0% { | |||
transform: rotate(0); | |||
} | |||
100% { | |||
transform: rotate(1turn); | |||
} | |||
} | |||
@keyframes spin { | |||
0% { | |||
transform: rotateY(0); | |||
} | |||
100% { | |||
transform: rotateY(1turn); | |||
} | |||
} | |||
@keyframes around { | |||
0% { | |||
translate: 0; | |||
} | |||
33% { | |||
translate: 50vw 0; | |||
} | |||
50% { | |||
translate: 50vw -25vw; | |||
} | |||
83% { | |||
translate: 0 -25vw; | |||
} | |||
100% { | |||
translate: 0 0; | |||
} | |||
} | |||
@keyframes roll { | |||
0% { | |||
rotate: 0 | |||
} | |||
100% { | |||
rotate: x 1turn | |||
} | |||
} | |||
}} | |||
