Spinning: Difference between revisions
No edit summary |
No edit summary |
||
| (5 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{Template:Distinguish|Rotation}} | |||
'''Spinnign''' Is a thing you can do which is awesome. | |||
<p class="warning">MOTION SICKNESS WARNING !!!!</p> | |||
{{#css: | {{#css: | ||
| Line 7: | Line 10: | ||
} | } | ||
50% { | 50% { | ||
transform: scale(0. | transform: scale(0.9) rotateY(180deg); | ||
} | } | ||
100% { | 100% { | ||
| Line 16: | Line 19: | ||
body { | body { | ||
perspective: 100rem; | perspective: 100rem; | ||
overflow-x: hidden; | |||
} | } | ||
#content { | #content { | ||
animation: spin 1s linear infinite; | animation: spin 1s linear infinite; | ||
} | |||
.warning { | |||
font-size: 4rem; | |||
color: red; | |||
font-weight: 900; | |||
animation: 10s trans ease-out; | |||
} | |||
@keyframes trans { | |||
0% { | |||
transform: translateX(-50%) scale(5); | |||
opacity: 0; | |||
} | |||
33% { | |||
transform: translateX(-50%) scale(5); | |||
opacity: 0; | |||
} | |||
100% { | |||
transform: translateX(0) scale(1); | |||
opacity: 1 | |||
} | |||
} | } | ||
}} | }} | ||