Difference between revisions of "Template:Cube"
Jump to navigation
Jump to search
Coppersalts (talk | contribs) |
|||
| (10 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
{{#css: | {{#css: | ||
.scene { | .scene { | ||
| − | width: | + | width: {{#if:{{{7|}}}|{{{7}}}|200}}px; |
| − | height: | + | height: {{#if:{{{7|}}}|{{{7}}}|200}}px; |
perspective: 600px; | perspective: 600px; | ||
| − | margin: | + | margin: {{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px; |
} | } | ||
| − | .cube { | + | .scene .cube { |
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
| Line 15: | Line 15: | ||
} | } | ||
| − | .cube-face { | + | .scene .cube-face { |
position: absolute; | position: absolute; | ||
| − | width: | + | width: {{#if:{{{7|}}}|{{{7}}}|200}}px; |
| − | height: | + | height: {{#if:{{{7|}}}|{{{7}}}|200}}px; |
} | } | ||
| − | .face-front { transform: rotateY( 0deg) translateZ( | + | .scene .face-front { transform: rotateY( 0deg) translateZ({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(255, 0, 0, {{{opacity|0.5}}}); } |
| − | .face-right { transform: rotateY( 90deg) translateZ( | + | .scene .face-right { transform: rotateY( 90deg) translateZ({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(255, 255, 0, {{{opacity|0.5}}}); } |
| − | .face-back { transform: rotateY(180deg) translateZ( | + | .scene .face-back { transform: rotateY(180deg) translateZ({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(0, 255, 0, {{{opacity|0.5}}}); } |
| − | .face-left { transform: rotateY(-90deg) translateZ( | + | .scene .face-left { transform: rotateY(-90deg) translateZ({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(0, 255, 255, {{{opacity|0.5}}}); } |
| − | .face-top { transform: rotateX( 90deg) translateZ( | + | .scene .face-top { transform: rotateX( 90deg) translateZ({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(0, 0, 255, {{{opacity|0.5}}}); } |
| − | .face-bottom { transform: rotateX(-90deg) translateZ( | + | .scene .face-bottom { transform: rotateX(-90deg) translateZ({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(255, 0, 255, {{{opacity|0.5}}}); } |
@keyframes rotatey { | @keyframes rotatey { | ||
0% { transform: rotate3d(0, 0, 1, 0deg); } | 0% { transform: rotate3d(0, 0, 1, 0deg); } | ||
| Line 39: | Line 39: | ||
<div class="cube-face face-left">{{#if:{{{4|}}}|{{{4}}}}}</div> | <div class="cube-face face-left">{{#if:{{{4|}}}|{{{4}}}}}</div> | ||
<div class="cube-face face-top">{{#if:{{{5|}}}|{{{5}}}}}</div> | <div class="cube-face face-top">{{#if:{{{5|}}}|{{{5}}}}}</div> | ||
| − | <div class="cube-face face-bottom">{{#if:{{{6|}}}|{{6}}}}</div> | + | <div class="cube-face face-bottom">{{#if:{{{6|}}}|{{{6}}}}}</div> |
</div> | </div> | ||
</div> | </div> | ||
[[Category:Pages containing a rotating css cube]] | [[Category:Pages containing a rotating css cube]] | ||
| − | <noinclude>By the way, this takes [[parameters]]! Usage is like this: <nowiki>{{Cube|1|2|3|4|5|6}}</nowiki>. You can add your own [[custom]] faces to [[THE CUBE (DJ Suwami song)|the cube]] this way! Also, every [[field]] in the template is [[optional]], so you can just have the blank cube if you [[wish]].</noinclude> | + | <noinclude>By the way, this takes [[parameters]]! Usage is like this: <nowiki>{{Cube|1|2|3|4|5|6|7}}</nowiki>, where 1-6 are the faces of the cube and 7 marks the size. You can add your own [[custom]] faces to [[THE CUBE (DJ Suwami song)|the cube]] this way! Also, every [[field]] in the template is [[optional]], so you can just have the blank cube if you [[wish]]. |
| + | |||
| + | {{Cube|https://cdn.discordapp.com/attachments/289050483627130880/1074423413508161686/image.png|https://cdn.discordapp.com/attachments/289050483627130880/1074422745066123295/image.png|https://cdn.discordapp.com/attachments/289050483627130880/1074422916709625876/image.png|https://cdn.discordapp.com/attachments/289050483627130880/1074422983197737021/image.png|https://cdn.discordapp.com/attachments/289050483627130880/1074423041557278861/image.png|https://cdn.discordapp.com/attachments/289050483627130880/1074423460534702090/image.png|204}} | ||
| + | |||
| + | Also, the "opacity" parameter determines the alpha channel of the default colored faces. | ||
| + | |||
| + | {{Cube|[[File:Nerpawhite.png|50px]]|[[File:Nerpawhite.png|50px]]|[[File:Nerpawhite.png|50px]]|[[File:Nerpawhite.png|50px]]|[[File:Nerpawhite.png|50px]]|[[File:Nerpawhite.png|50px]]|opacity=0.2}} | ||
| + | |||
| + | [[File:CubeMap.png|300px]]</span></noinclude> | ||
Latest revision as of 05:38, 18 January 2024
By the way, this takes parameters! Usage is like this: {{Cube|1|2|3|4|5|6|7}}, where 1-6 are the faces of the cube and 7 marks the size. You can add your own custom faces to the cube this way! Also, every field in the template is optional, so you can just have the blank cube if you wish.
Also, the "opacity" parameter determines the alpha channel of the default colored faces.
