Difference between revisions of "Template:Cube"
Jump to navigation
Jump to search
LegendFinder (talk | contribs) (I hope this doesn't break any existing cubes) |
Coppersalts (talk | contribs) |
||
| (5 intermediate revisions by 3 users not shown) | |||
| Line 7: | Line 7: | ||
} | } | ||
| − | .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: {{#if:{{{7|}}}|{{{7}}}|200}}px; | width: {{#if:{{{7|}}}|{{{7}}}|200}}px; | ||
height: {{#if:{{{7|}}}|{{{7}}}|200}}px; | height: {{#if:{{{7|}}}|{{{7}}}|200}}px; | ||
} | } | ||
| − | .face-front { transform: rotateY( 0deg) translateZ({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(255, 0, 0, 0.5); } | + | .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({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(255, 255, 0, 0.5); } | + | .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({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(0, 255, 0, 0.5); } | + | .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({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(0, 255, 255, 0.5); } | + | .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({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(0, 0, 255, 0.5); } | + | .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({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(255, 0, 255, 0.5); } | + | .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 43: | Line 43: | ||
</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|7}}</nowiki>, where 1-6 are the | + | <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.
