This is a documentation for Board Game Arena: play board games online !

Template:D6: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
(inline fix)
(using transform:perspective())
Line 1: Line 1:
<span id="cube" style="display:inline-block;position:relative;height:{{{S|45}}}px;width:{{{S|45}}}px;margin:calc({{{S|45}}}*.25px);font-family:Roboto,Arial,sans-serif;font-weight:700;perspective:calc({{{S|45}}}*10px);perspective-origin:{{{Po|70% 100%}}};transform-style:preserve-3d;transform:rotateX({{{Rx|15}}}deg) rotateY({{{Ry|-15}}}deg) rotateZ({{{R|0}}}deg);"><span id="t" style="position:absolute;transform:rotateZ(calc({{{tR|0}}}*-90deg)) rotateX(90deg) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="position:absolute;left:calc(-{{{S|45}}}px*({{{tI|{{{t|1}}}}}} - 1));background:{{{IB|{{{tIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{tH|{{{2|200}}}}}}));">[[File:{{{tI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{tTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{tTC|{{{TC|#000}}}}}};background:{{{B|{{{tB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{tT|}}}</span></span></span><span id="f" style="position:absolute;transform:rotateZ(calc({{{fR|0}}}*-90deg)) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="position:absolute;left:calc(-{{{S|45}}}px*({{{fI|{{{f|2}}}}}} - 1));background:{{{IB|{{{fIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{fH|{{{2|200}}}}}}));">[[File:{{{fI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{fTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{fTC|{{{TC|#000}}}}}};background:{{{B|{{{fB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{fT|}}}</span></span></span><span id="r" style="position:absolute;transform:rotateZ(calc({{{rR|0}}}*-90deg)) rotateY(90deg) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="\position:absolute;left:calc(-{{{S|45}}}px*({{{rI|{{{r|3}}}}}} - 1));background:{{{IB|{{{rIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{rH|{{{2|200}}}}}}));">[[File:{{{rI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{rTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{rTC|{{{TC|#000}}}}}};background:{{{B|{{{rB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{lT|}}}</span></span></span><span id="b" style="position:absolute;transform:rotateZ(calc({{{bkR|0}}}*-90deg)) rotateY(180deg) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="position:absolute;left:calc(-{{{S|45}}}px*({{{bkI|{{{bk|4}}}}}} - 1));background:{{{IB|{{{bkIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{bkH|{{{2|200}}}}}}));">[[File:{{{bkI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{bkTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{bkTC|{{{TC|#000}}}}}};background:{{{B|{{{bkB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{bkT|}}}</span></span></span><span id="l" style="position:absolute;transform:rotateZ(calc({{{lR|0}}}*-90deg)) rotateY(-90deg) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="position:absolute;left:calc(-{{{S|45}}}px*({{{lI|{{{l|5}}}}}} - 1));background:{{{IB|{{{lIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{lH|{{{2|200}}}}}}));">[[File:{{{lI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{lTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{lTC|{{{TC|#000}}}}}};background:{{{B|{{{lB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{rT|}}}</span></span></span><span id="b" style="position:absolute;transform:rotateZ(calc({{{bR|0}}}*-90deg)) rotateX(-90deg) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="position:absolute;left:calc(-{{{S|45}}}px*({{{bI|{{{b|6}}}}}} - 1));background:{{{IB|{{{bIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{bH|{{{2|200}}}}}}));">[[File:{{{bI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{bTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{bTC|{{{TC|#000}}}}}};background:{{{B|{{{bB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{bT|}}}</span></span></span></span><noinclude>
<span style="display:inline-block;position:relative;height:{{{S|45}}}px;width:{{{S|45}}}px;margin:calc({{{S|45}}}*.25px);font-family:Roboto,Arial,sans-serif;font-weight:700;transform-style:preserve-3d;transform:perspective(calc({{{S|45}}}*10px)) rotateX({{{Rx|15}}}deg) rotateY({{{Ry|-15}}}deg) rotateZ({{{R|0}}}deg);"><span style="position:absolute;transform:rotateZ(calc({{{tR|0}}}*-90deg)) rotateX(90deg) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="position:absolute;left:calc(-{{{S|45}}}px*({{{tI|{{{t|1}}}}}} - 1));background:{{{IB|{{{tIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{tH|{{{2|200}}}}}}));">[[File:{{{tI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{tTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{tTC|{{{TC|#000}}}}}};background:{{{B|{{{tB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{tT|}}}</span></span></span><span style="position:absolute;transform:rotateZ(calc({{{fR|0}}}*-90deg)) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="position:absolute;left:calc(-{{{S|45}}}px*({{{fI|{{{f|2}}}}}} - 1));background:{{{IB|{{{fIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{fH|{{{2|200}}}}}}));">[[File:{{{fI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{fTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{fTC|{{{TC|#000}}}}}};background:{{{B|{{{fB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{fT|}}}</span></span></span><span style="position:absolute;transform:rotateZ(calc({{{rR|0}}}*-90deg)) rotateY(90deg) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="\position:absolute;left:calc(-{{{S|45}}}px*({{{rI|{{{r|3}}}}}} - 1));background:{{{IB|{{{rIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{rH|{{{2|200}}}}}}));">[[File:{{{rI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{rTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{rTC|{{{TC|#000}}}}}};background:{{{B|{{{rB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{lT|}}}</span></span></span><span style="position:absolute;transform:rotateZ(calc({{{bkR|0}}}*-90deg)) rotateY(180deg) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="position:absolute;left:calc(-{{{S|45}}}px*({{{bkI|{{{bk|4}}}}}} - 1));background:{{{IB|{{{bkIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{bkH|{{{2|200}}}}}}));">[[File:{{{bkI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{bkTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{bkTC|{{{TC|#000}}}}}};background:{{{B|{{{bkB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{bkT|}}}</span></span></span><span style="position:absolute;transform:rotateZ(calc({{{lR|0}}}*-90deg)) rotateY(-90deg) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="position:absolute;left:calc(-{{{S|45}}}px*({{{lI|{{{l|5}}}}}} - 1));background:{{{IB|{{{lIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{lH|{{{2|200}}}}}}));">[[File:{{{lI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{lTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{lTC|{{{TC|#000}}}}}};background:{{{B|{{{lB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{rT|}}}</span></span></span><span style="position:absolute;transform:rotateZ(calc({{{bR|0}}}*-90deg)) rotateX(-90deg) translateZ(calc({{{S|45}}}*.5px));"><span style="display:block;position:relative;overflow:hidden;height:calc(1px*{{{S|45}}});width:calc(1px*{{{S|45}}});"><span style="position:absolute;left:calc(-{{{S|45}}}px*({{{bI|{{{b|6}}}}}} - 1));background:{{{IB|{{{bIB|#fff0}}}}}};transform-origin:top left;transform:scale(calc({{{S|45}}}/{{{bH|{{{2|200}}}}}}));">[[File:{{{bI|{{{1|d6Faces.png}}}}}}]]</span><span style="display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;font-size:{{{bTS|{{{TS|calc({{{S|45}}}*.5px)}}}}}};color:{{{bTC|{{{TC|#000}}}}}};background:{{{B|{{{bB|#fff0}}}}}};box-shadow:0 0 calc({{{S|45}}}*.0625px) #0004 inset;">{{{bT|}}}</span></span></span></span><noinclude>


{{infoBoxes |color1=#37c |color2=#3aa |titleAlign=left
{{infoBoxes |color1=#37c |color2=#3aa |titleAlign=left
Line 91: Line 91:
   <div>{{d6|Ry=30}}</div>
   <div>{{d6|Ry=30}}</div>
   <div>'''''Optional:''''' rotate the cube around the vertical y-axis (right) in degrees.</div>
   <div>'''''Optional:''''' rotate the cube around the vertical y-axis (right) in degrees.</div>
  <div><code>Po</code></div>
  <div>Perspective origin</div>
  <div><code>70% 100%</code><br>(looking up & left)</div>
  <div><code><nowiki>{{d6|Po=-600% -500%}}</nowiki></code></div>
  <div>{{d6|Po=-600% -500%}}</div>
  <div>'''''Optional:''''' change the perspective origin <code>[x]</code> <code>[y]</code> position.</div>
   <div><code>B</code>/<br><code>[face]B</code></div>
   <div><code>B</code>/<br><code>[face]B</code></div>
   <div>Background</div>
   <div>Background</div>

Revision as of 15:11, 10 June 2025

D6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.png

Step 1
Upload YourDieFacesImage.png (an image of all six faces i.e. with ratio 6:1)e.g. d6Faces.png (1200×200 pixels)D6Faces.png
Step 2
Insert {{d6|YourDieFacesImage.png|HeightInPixels}}e.g. {{d6|d6Faces.png|200}}D6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.png

Examples

Parks

Step 1
Upload ParksDie.jpg (324×54 pixels)ParksDie.jpg.
Step 2
Insert {{d6|ParksDie.jpg|54}}ParksDie.jpgParksDie.jpgParksDie.jpgParksDie.jpgParksDie.jpgParksDie.jpgInsert {{d6|ParksDie.jpg|54|r=4|l=3|bk=5|bkR=2|R=20|Rx=-170|Ry=30}}ParksDie.jpgParksDie.jpgParksDie.jpgParksDie.jpgParksDie.jpgParksDie.jpg

Parameters

[face] names
lowercase:
  1. top
  2. front
  3. right
  4. bk back
  5. left
  6. bottom
Property names
Uppercase:
Image
Height
Size
Rotate
Background
Text
Color


Id
Name
Default
Example
Result
Description
1, 2 /
[face]I, [face]H
Image, Height
d6Faces.png, 200
{{d6|d6Faces.png|200}}/
{{d6|fI=logo.png|fH=1842}}
D6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.png / D6Faces.pngLogo without title.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.png
Required: image file name and its height in px units.
S
Size
45
{{d6|S=60}}
D6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.png
Optional: size of cube in px units.
[face]
Face number
[1-6]
{{d6|f=3}}
D6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.png
Optional: set which [faceNumber] (1-6) displays on a specific [face].
[face]R
Face rotate
0
{{d6|fR=1}}
D6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.png
Optional: rotate a specific [face] in units of 90° clockwise.
R
Rotate clockwise
0
{{d6|R=30}}
D6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.png
Optional: rotate the cube around the perspective z-axis (clockwise) in degrees.
Rx
Rotate up
15
{{d6|Rx=30}}
D6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.png
Optional: rotate the cube around the horizontal x-axis (up) in degrees.
Ry
Rotate right
-15
{{d6|Ry=30}}
D6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.png
Optional: rotate the cube around the vertical y-axis (right) in degrees.
B/
[face]B
Background
transparent
{{d6|B=lime}}/
{{d6|fB=lime}}
D6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.png/D6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.pngD6Faces.png
Optional: set a CSS background color or gradient.
[face]T
Text value
empty
{{d6|fT=💥}}
D6Faces.pngD6Faces.png💥D6Faces.pngD6Faces.pngD6Faces.pngD6Faces.png
Optional: set a text value for a specific [face].
TS/
[face]TS
Text size
16px
{{d6|fT=💥|TS=36px}}/
{{d6|fT=💥|fTS=36px}}
D6Faces.pngD6Faces.png💥D6Faces.pngD6Faces.pngD6Faces.pngD6Faces.png
Optional: text size as a CSS <length> value.
TC/
[face]TC
Text color
black
{{d6|fT=★|TC=green}}/
{{d6|fT=★|fTC=green}}
D6Faces.pngD6Faces.png★D6Faces.pngD6Faces.pngD6Faces.pngD6Faces.png
Optional: text color as a CSS <color> value.
Retrieved from "http:///index.php?title=Template:D6&oldid=25358"