Difference between revisions of "Template:Cube"
Jump to navigation
Jump to search
Coppersalts (talk | contribs) |
LegendFinder (talk | contribs) (I hope this doesn't break any existing cubes) |
||
| 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; |
} | } | ||
| Line 17: | Line 17: | ||
.cube-face { | .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( | + | .face-front { transform: rotateY( 0deg) translateZ({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(255, 0, 0, 0.5); } |
| − | .face-right { transform: rotateY( 90deg) translateZ( | + | .face-right { transform: rotateY( 90deg) translateZ({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(255, 255, 0, 0.5); } |
| − | .face-back { transform: rotateY(180deg) translateZ( | + | .face-back { transform: rotateY(180deg) translateZ({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(0, 255, 0, 0.5); } |
| − | .face-left { transform: rotateY(-90deg) translateZ( | + | .face-left { transform: rotateY(-90deg) translateZ({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(0, 255, 255, 0.5); } |
| − | .face-top { transform: rotateX( 90deg) translateZ( | + | .face-top { transform: rotateX( 90deg) translateZ({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(0, 0, 255, 0.5); } |
| − | .face-bottom { transform: rotateX(-90deg) translateZ( | + | .face-bottom { transform: rotateX(-90deg) translateZ({{#if:{{{7|}}}|{{#expr: {{{7}}}/2}}|100}}px); background-color: rgba(255, 0, 255, 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}}</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 sides 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]].</noinclude> |