Difference between revisions of "Fictional charcter/Test page"
Jump to navigation
Jump to search
m |
|||
(13 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | |||
− | |||
{{#css: | {{#css: | ||
− | + | #flippant:hover #ogtext{ | |
− | + | display:none; | |
+ | } | ||
− | + | #flippant:hover #alttext{ | |
− | + | display:block; | |
− | + | } | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | { | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
.scene { | .scene { | ||
− | |||
− | |||
− | |||
width: 200px; | width: 200px; | ||
height: 200px; | height: 200px; | ||
perspective: 600px; | perspective: 600px; | ||
+ | margin: 100px; | ||
} | } | ||
− | . | + | |
+ | .cube1 { | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
position: relative; | position: relative; | ||
transform-style: preserve-3d; | transform-style: preserve-3d; | ||
− | animation: rotatey1 | + | -webkit-transform-style: preserve-3d; |
+ | animation: rotatey1 5s linear infinite; | ||
+ | -webkit-animation: rotatey1 5s linear infinite; | ||
+ | -moz-animation: rotatey1 5s linear infinite; | ||
} | } | ||
− | . | + | .cube2 { |
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
position: relative; | position: relative; | ||
transform-style: preserve-3d; | transform-style: preserve-3d; | ||
− | animation: rotatey2 | + | -webkit-transform-style: preserve-3d; |
+ | animation: rotatey2 3s linear infinite; | ||
+ | -webkit-animation: rotatey2 3s linear infinite; | ||
+ | -moz-animation: rotatey2 3s linear infinite; | ||
} | } | ||
− | . | + | .cube3 { |
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
position: relative; | position: relative; | ||
transform-style: preserve-3d; | transform-style: preserve-3d; | ||
− | animation: rotatey3 | + | -webkit-transform-style: preserve-3d; |
+ | animation: rotatey3 7s linear infinite; | ||
+ | -webkit-animation: rotatey3 7s linear infinite; | ||
+ | -moz-animation: rotatey3 7s linear infinite; | ||
} | } | ||
Line 186: | Line 61: | ||
.face-top { transform: rotateX( 90deg) translateZ(100px); -webkit-transform: rotateX( 90deg) translateZ(100px); background-color: white; } | .face-top { transform: rotateX( 90deg) translateZ(100px); -webkit-transform: rotateX( 90deg) translateZ(100px); background-color: white; } | ||
.face-bottom { transform: rotateX( -90deg) translateZ(100px); -webkit-transform: rotateX( -90deg) translateZ(100px); background-color: white; } | .face-bottom { transform: rotateX( -90deg) translateZ(100px); -webkit-transform: rotateX( -90deg) translateZ(100px); background-color: white; } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
@keyframes rotatey1 { | @keyframes rotatey1 { | ||
0% { transform: rotate3d(0, 0, 1, 0deg); } | 0% { transform: rotate3d(0, 0, 1, 0deg); } | ||
Line 222: | Line 73: | ||
100% { transform: rotate3d(1, 0, 0, 360deg); } | 100% { transform: rotate3d(1, 0, 0, 360deg); } | ||
} | } | ||
+ | |||
+ | |||
+ | @-webkit-keyframes rotatey1 { | ||
+ | 0% { -webkit-transform: rotate3d(0, 0, 1, 0deg); } | ||
+ | 100% { -webkit-transform: rotate3d(0, 0, 1, 360deg); } | ||
+ | } | ||
+ | @-webkit-keyframes rotatey2 { | ||
+ | 0% { -webkit-transform: rotate3d(0, 0, 1, 0deg); } | ||
+ | 100% { -webkit-transform: rotate3d(0, 1, 0, 360deg); } | ||
+ | } | ||
+ | @-webkit-keyframes rotatey3 { | ||
+ | 0% { -webkit-transform: rotate3d(0, 0, 1, 0deg); } | ||
+ | 100% { -webkit-transform: rotate3d(1, 0, 0, 360deg); } | ||
+ | } | ||
+ | |||
+ | |||
+ | @-moz-keyframes rotatey1 { | ||
+ | 0% { -moz-transform: rotate3d(0, 0, 1, 0deg); } | ||
+ | 100% { -moz-transform: rotate3d(0, 0, 1, 360deg); } | ||
+ | } | ||
+ | @-moz-keyframes rotatey2 { | ||
+ | 0% { -moz-transform: rotate3d(0, 0, 1, 0deg); } | ||
+ | 100% { -moz-transform: rotate3d(0, 1, 0, 360deg); } | ||
+ | } | ||
+ | @-moz-keyframes rotatey3 { | ||
+ | 0% { -moz-transform: rotate3d(0, 0, 1, 0deg); } | ||
+ | 100% { -moz-transform: rotate3d(1, 0, 0, 360deg); } | ||
+ | } | ||
+ | /* most of the css was taken from https://3dtransforms.desandro.com/cube */ | ||
}} | }} | ||
<div class="scene"> | <div class="scene"> | ||
− | + | <div class="cube1"> | |
− | + | <div class="cube2"> | |
− | + | <div class="cube3"> | |
− | + | <div class="cube-face face-front">[[File:ZEITGEISTfront.png|frameless|200px]]</div> | |
− | + | <div class="cube-face face-back">[[File:ZEITGEISTback.png|frameless|200px]]</div> | |
− | + | <div class="cube-face face-right">[[File:ZEITGEISTright.png|frameless|200px]]</div> | |
− | + | <div class="cube-face face-left">[[File:ZEITGEISTleft.png|frameless|200px]]</div> | |
− | + | <div class="cube-face face-top">[[File:ZEITGEISTtop.png|frameless|200px]]</div> | |
− | + | <div class="cube-face face-bottom">[[File:ZEITGEISTbottom.png|frameless|200px]]</div> | |
− | + | </div> | |
− | + | </div> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
+ | {{Dia|Statler|What's your thoughts on [[Paper Niko]]?}} | ||
+ | |||
+ | {{Dia|Waldorf|Their personality is as flat as the mat<!--haha okin salad toss-->erial they were made with!}} | ||
+ | |||
+ | {{Dia|SWLaugh|'''[JOKE BY TYGREENIE]'''}} | ||
+ | |||
+ | <span id="blink"><span id=flippant><span id=ogtext>[[File:9150625.png|325px|9150625]]</span><span id=alttext>[[File:055.png|325px|9150625?]]</span></span></span> | ||
+ | <span id=flippant><span id=ogtext>Unconfirmed {{Citation unneeded}}</span><span id=alttext><span class=anomalous>Multiversal travel.</span></span></span> | ||
+ | |||
+ | [[Category:Pages containing a rotating css cube]] | ||
+ | [[Category:Functional pages]] |
Latest revision as of 18:35, 28 December 2022
What's your thoughts on Paper Niko?
|
Their personality is as flat as the material they were made with!
|
[JOKE BY TYGREENIE]
|
Unconfirmed[citation unneeded]Multiversal travel.