Difference between revisions of "Hahaha Okin Salad Toss"
Jump to navigation
Jump to search
(Created page with "thumb|oh.. hi... please eat healthy. Just...so...NUTRITIOUS!! Category:Seals") |
|||
| Line 1: | Line 1: | ||
[[File:Hostkin.png|thumb|oh.. hi... please eat healthy.]] | [[File:Hostkin.png|thumb|oh.. hi... please eat healthy.]] | ||
Just...so...NUTRITIOUS!! | Just...so...NUTRITIOUS!! | ||
| + | |||
| + | {{#css: | ||
| + | .scene { | ||
| + | width: 200px; | ||
| + | height: 200px; | ||
| + | perspective: 600px; | ||
| + | margin: 100px; | ||
| + | } | ||
| + | |||
| + | .cube { | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | position: relative; | ||
| + | transform-style: preserve-3d; | ||
| + | animation: rotatey 5s linear infinite; | ||
| + | } | ||
| + | |||
| + | .cube-face { | ||
| + | position: absolute; | ||
| + | width: 200px; | ||
| + | height: 200px; | ||
| + | } | ||
| + | .face-front { transform: rotateY( 0deg) translateZ(00px); background-color: rgba(255, 0, 0, 0); } | ||
| + | .face-right { transform: rotateY( 90deg) translateZ(00px); background-color: rgba(255, 255, 0, 0); } | ||
| + | .face-back { transform: rotateY(180deg) translateZ(00px); background-color: rgba(0, 255, 0, 0); } | ||
| + | .face-left { transform: rotateY(-90deg) translateZ(00px); background-color: rgba(0, 255, 255, 0); } | ||
| + | .face-top { transform: rotateX( 90deg) translateZ(00px); background-color: rgba(0, 0, 255, 0); } | ||
| + | .face-bottom { transform: rotateX(-90deg) translateZ(00px); background-color: rgba(255, 0, 255, 0); } | ||
| + | @keyframes rotatey { | ||
| + | 0% { transform: rotate3d(0, 0, 1, 0deg); } | ||
| + | 100% { transform: rotate3d(1, 0, 1, 360deg); } | ||
| + | } | ||
| + | /* most of the css was taken from https://3dtransforms.desandro.com/cube */ | ||
| + | }} | ||
| + | <div class="scene"> | ||
| + | <div class="cube"> | ||
| + | <div class="cube-face face-front">[[File:Saladtor.png|frameless]]</div> | ||
| + | <div class="cube-face face-back">[[File:Saladtor.png|frameless]]</div> | ||
| + | <div class="cube-face face-right">[[File:Saladtor.png|frameless]]</div> | ||
| + | <div class="cube-face face-left">[[File:Saladtor.png|frameless]]</div></div> | ||
| + | <div class="cube-face face-top"></div> | ||
| + | <div class="cube-face face-bottom"></div> | ||
| + | </div> | ||
[[Category:Seals]] | [[Category:Seals]] | ||
| + | [[Category:Food]] | ||
