This site is supported by donations to The OEIS Foundation.
Template:Rotate/doc
The {{rotate}} affine transform template rotates an element about a given origin (rotation point, from left top of the element's bounding box, which defaults to the center of it's bounding box).
Contents
- 1 Usage
- 2 Valid input
- 3 Examples
- 3.1 Examples with valid input
- 3.1.1 Rotating text (default behavior)
- 3.1.2 Rotating text (explicit deg)
- 3.1.3 Rotating text (rad)
- 3.1.4 Rotating text (testing angle units)
- 3.1.5 Rotating text (testing angles)
- 3.1.6 Rotating an image (with default origin, i.e. at center of image box)
- 3.1.7 Rotating an image (with specified origin)
- 3.1.8 Rotating graphic elements with default origin 50% 50%
- 3.1.9 Rotating graphic elements with origin 100% 0%
- 3.2 Examples with invalid input
- 3.1 Examples with valid input
- 4 More elaborate examples
- 5 Analog clock example
- 6 Code
- 7 CSS Transforms
- 8 See also
- 9 External links
Usage
{{rotate| ''element to rotate'' | angle = ''counterclockwise angle'' (default: 0) | angle unit = deg, rad, grad or turn (default: rad) | origin = ''x y'' (default: 50% 50%) }}
or
- {{rotate|element to rotate|angle = counterclockwise angle (default: 0)|angle unit = deg, rad, grad or turn (default: rad)}}
or
- {{rotate|element to rotate|angle = counterclockwise angle (default: 0)}}
or
- {{rotate|element to rotate|counterclockwise angle (default: 0)}}
or (identity operation, since rotation is with default angle, i.e. 0)
- {{rotate|element to rotate}}
Valid input
- angle: angle (positive is counterclockwise) as a real number (default: 0);
- angle unit: deg, rad, grad or turn (default: rad);
- origin: x y origin (from top left of the element's bounding box) used as rotation point (default: 50% 50%), with units among %, px, cm, mm, in, pt, pc, em, ex.
Examples
Examples with valid input
Rotating text (default behavior)
'''(before)''' {{nl|0}} '''(just before)'''{{rotate|<span style {{=}} "font-size: 24px; color: rgba(255, 0, 0, 0.5);">The On-Line Encyclopedia of Integer Sequences® (OEIS®)</span>}}'''(just after)''' {{nl|0}} '''(after)'''
gives (default is null rotation)
(before)(just before)The On-Line Encyclopedia of Integer Sequences® (OEIS®)(just after)
(after)
Rotating text (explicit deg)
'''(before)''' {{nl|18}} '''(just before)'''{{rotate|<span style {{=}} "font-size: 24px;">The On-Line Encyclopedia of Integer Sequences® (OEIS®)</span>|90|angle unit = deg}}'''(just after)''' {{nl|18}} '''(after)'''
gives (this shows that the text box is rotated about its center by default)
(before)
(just before)The On-Line Encyclopedia of Integer Sequences® (OEIS®)(just after)
(after)
Rotating text (rad)
'''(before)''' {{nl|18}} '''(just before)'''{{rotate|<span style {{=}} "font-size: 24px;">The On-Line Encyclopedia of Integer Sequences® (OEIS®)</span>|pi/4|angle unit = rad}}'''(just after)''' {{nl|18}} '''(after)'''
gives (this shows that the text box is rotated about its center by default)
(before)
(just before)The On-Line Encyclopedia of Integer Sequences® (OEIS®)(just after)
(after)
Rotating text (testing angle units)
Code | Result |
---|---|
{{rotate|<span style{{=}}"background: lightgray;">→</span>|pi/4}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|45|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|pi/4|angle unit = rad}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|50|angle unit = grad}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|1/8|angle unit = turn}} | → |
Rotating text (testing angles)
Code | Result |
---|---|
{{rotate|<span style{{=}}"background: lightgray;">→</span>}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|0|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|15|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|30|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|45|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|60|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|75|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|90|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|105|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|120|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|135|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|150|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|165|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|180|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|195|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|210|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|225|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|240|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|255|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|270|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|285|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|300|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|315|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|330|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|345|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|360|angle unit = deg}} | → |
{{rotate|<span style{{=}}"background: lightgray;">→</span>|720|angle unit = deg}} | → |
Rotating an image (with default origin, i.e. at center of image box)
The image File:Clockface.png, shown via the code
<!-- -->{{canvas|width = 350|height = 350|units = px|<!-- --><!--{{translate|--><!-- -->{{image|Clockface.png| center = 0, 0 | width = 250 | height = 250 | units = px }}<!-- --><!--| 350/2, 350/2 | unit = px }}--><!-- -->}}<!-- -->
yields
| |
rotated 0o with the code
<!-- -->{{canvas|width = 350|height = 350|units = px|<!-- --><!--{{translate|--><!-- -->{{rotate|<!-- -->{{image|Clockface.png| center = 0, 0 | width = 250 | height = 250 | units = px }}<!-- -->| 0 | angle unit = deg }}<!-- --><!--| 350/2, 350/2 | unit = px }}--><!-- -->}}<!-- -->
yields
| |
rotated 45o with the code
<!-- -->{{canvas|width = 350|height = 350|units = px|<!-- --><!--{{translate|--><!-- -->{{rotate|<!-- -->{{image|Clockface.png| center = 0, 0 | width = 250 | height = 250 | units = px }}<!-- -->| 45 | angle unit = deg }}<!-- --><!--| 350/2, 350/2 | unit = px }}--><!-- -->}}<!-- -->
yields
| |
rotated 90o with the code
<!-- -->{{canvas|width = 350|height = 350|units = px|<!-- --><!--{{translate|--><!-- -->{{rotate|<!-- -->{{image|Clockface.png| center = 0, 0 | width = 250 | height = 250 | units = px }}<!-- -->| 90 | angle unit = deg }}<!-- --><!--| 350/2, 350/2 | unit = px }}--><!-- -->}}<!-- -->
yields
| |
rotated 120o with the code
<!-- -->{{canvas|width = 350|height = 350|units = px|<!-- --><!--{{translate|--><!-- -->{{rotate|<!-- -->{{image|Clockface.png| center = 0, 0 | width = 250 | height = 250 | units = px }}<!-- -->| 120 | angle unit = deg }}<!-- --><!--| 350/2, 350/2 | unit = px }}--><!-- -->}}<!-- -->
yields
| |
Rotating an image (with specified origin)
The image File:Clockface.png, shown via the code
<!-- -->{{canvas|width = 350|height = 350|units = px|<!-- -->{{translate|[[File:Clockface.png|250x250px]]| (350 - 250)/2, (350 - 250)/2 | unit = px }}<!-- -->}}<!-- -->
yields
| |
rotated 90o about the left top corner of the image with the code
<!-- -->{{canvas|width = 350|height = 350|units = px|<!-- -->{{translate|<!-- -->{{rotate|[[File:Clockface.png|250x250px]]| 90 | angle unit = deg | origin = 0% 0% }}<!-- -->| (350 - 250)/2, (350 - 250)/2 | unit = px }}<!-- -->}}<!-- -->
| |
while rotated 90o about the right top corner of the image with the code
<!-- -->{{canvas|width = 350|height = 350|units = px|<!-- -->{{translate|<!-- -->{{rotate|[[File:Clockface.png|250x250px]]| 90 | angle unit = deg | origin = 100% 0% }}<!-- -->| (350 - 250)/2, (350 - 250)/2 | unit = px }}<!-- -->}}<!-- -->
yields
| |
Rotating graphic elements with default origin 50% 50%
NOTE: for some reason, the origin for rotation happens to be the bottom left corner of the bounding box of the line.
Code | Result | |||
---|---|---|---|---|
{{canvas|width = 100|height = 100|units = px|{{line|length = 64}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|0|angle unit = deg}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|15|angle unit = deg}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|30|angle unit = deg}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|45|angle unit = deg}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|60|angle unit = deg}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|75|angle unit = deg}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|90|angle unit = deg}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|pi/4|angle unit = rad}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|pi/2|angle unit = rad}}}} |
|
Rotating graphic elements with origin 100% 0%
Code | Result | |||
---|---|---|---|---|
{{canvas|width = 100|height = 100|units = px|{{line|length = 64}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|0|angle unit = deg|origin = 100% 0%}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|15|angle unit = deg|origin = 100% 0%}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|30|angle unit = deg|origin = 100% 0%}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|45|angle unit = deg|origin = 100% 0%}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|60|angle unit = deg|origin = 100% 0%}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|75|angle unit = deg|origin = 100% 0%}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|90|angle unit = deg|origin = 100% 0%}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|pi/4|origin = 100% 0%}}}} |
| |||
{{canvas|width = 100|height = 100|units = px|{{rotate|{{line|length = 64}}|pi/2|origin = 100% 0%}}}} |
|
Code Result {{rotate|{{line|length = 64}}|angle = 18 | angle unit = deg }} {{rotate|{{line|length = 64}}|angle = 18+72 | angle unit = deg }} {{rotate|{{line|length = 64}}|angle = 18+2*72| angle unit = deg }} {{rotate|{{line|length = 64}}|angle = 18+3*72| angle unit = deg }} {{rotate|{{line|length = 64}}|angle = 18+4*72| angle unit = deg }}
Examples with invalid input
Code Result {{rotate|{{line|length = 64}}|100/6|angle unit = %}} Rotate error: Invalid angle unit! {{rotate|→|i}} <span style="display: inline-block; position: absolute; -moz-transform: rotate(Expression error: Unrecognized word "i".rad); /* Firefox */ -ms-transform: rotate(Expression error: Unrecognized word "i".rad); /* IE 9 */ -webkit-transform: rotate(Expression error: Unrecognized word "i".rad); /* Safari and Chrome */ -o-transform: rotate(Expression error: Unrecognized word "i".rad); /* Opera */ transform: rotate(Expression error: Unrecognized word "i".rad); /* no prefix */
-moz-transform-origin: 50% 50%; /* Firefox */ -ms-transform-origin: 50% 50%; /* IE 9 */ -webkit-transform-origin: 50% 50%; /* Safari and Chrome */ -o-transform-origin: 50% 50%; /* Opera */ transform-origin: 50% 50%; /* no prefix */
">→</span>
More elaborate examples
<!-- -->{{canvas|width = 500|height = 500|float = right|<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{polygon|5| 150 * cos (0*(2*pi/5)), 150 * sin (0*(2*pi/5)); 150 * cos (1*(2*pi/5)), 150 * sin (1*(2*pi/5)); 150 * cos (2*(2*pi/5)), 150 * sin (2*(2*pi/5)); 150 * cos (3*(2*pi/5)), 150 * sin (3*(2*pi/5)); 150 * cos (4*(2*pi/5)), 150 * sin (4*(2*pi/5)); }}<!-- -->| angle = 1*(pi/10) }}<!-- -->| 250, 250 }}<!-- -->}}<!-- --> |
yields |
|
Rotation applied before translation
<!-- -->{{canvas|width = 500|height = 500|float = right|<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{polygon|5| 150 * cos (0*(2*pi/5)), 150 * sin (0*(2*pi/5)); 150 * cos (1*(2*pi/5)), 150 * sin (1*(2*pi/5)); 150 * cos (2*(2*pi/5)), 150 * sin (2*(2*pi/5)); 150 * cos (3*(2*pi/5)), 150 * sin (3*(2*pi/5)); 150 * cos (4*(2*pi/5)), 150 * sin (4*(2*pi/5)); }}<!-- -->| angle = 0*(pi/10) }}<!-- -->| 250, 250 }}<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{polygon|5| 150 * cos (0*(2*pi/5)), 150 * sin (0*(2*pi/5)); 150 * cos (1*(2*pi/5)), 150 * sin (1*(2*pi/5)); 150 * cos (2*(2*pi/5)), 150 * sin (2*(2*pi/5)); 150 * cos (3*(2*pi/5)), 150 * sin (3*(2*pi/5)); 150 * cos (4*(2*pi/5)), 150 * sin (4*(2*pi/5)); }}<!-- -->| angle = 1*(pi/10) }}<!-- -->| 250, 250 }}<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{polygon|5| 150 * cos (0*(2*pi/5)), 150 * sin (0*(2*pi/5)); 150 * cos (1*(2*pi/5)), 150 * sin (1*(2*pi/5)); 150 * cos (2*(2*pi/5)), 150 * sin (2*(2*pi/5)); 150 * cos (3*(2*pi/5)), 150 * sin (3*(2*pi/5)); 150 * cos (4*(2*pi/5)), 150 * sin (4*(2*pi/5)); }}<!-- -->| angle = 2*(pi/10) }}<!-- -->| 250, 250 }}<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{polygon|5| 150 * cos (0*(2*pi/5)), 150 * sin (0*(2*pi/5)); 150 * cos (1*(2*pi/5)), 150 * sin (1*(2*pi/5)); 150 * cos (2*(2*pi/5)), 150 * sin (2*(2*pi/5)); 150 * cos (3*(2*pi/5)), 150 * sin (3*(2*pi/5)); 150 * cos (4*(2*pi/5)), 150 * sin (4*(2*pi/5)); }}<!-- -->| angle = 3*(pi/10) }}<!-- -->| 250, 250 }}<!-- -->}}<!-- --> |
yields |
|
Translation applied before rotation
<!-- -->{{canvas|width = 500|height = 500|float = right|<!-- -->{{translate|<!-- -->{{rotate|<!-- -->{{rotate|<!-- -->{{translate|<!-- -->{{polygon|5| 100 * cos (0*(2*pi/5)), 100 * sin (0*(2*pi/5)); 100 * cos (1*(2*pi/5)), 100 * sin (1*(2*pi/5)); 100 * cos (2*(2*pi/5)), 100 * sin (2*(2*pi/5)); 100 * cos (3*(2*pi/5)), 100 * sin (3*(2*pi/5)); 100 * cos (4*(2*pi/5)), 100 * sin (4*(2*pi/5)); }}<!-- -->| 100, 0 }}<!-- -->| angle = 0*(2*pi/5) }}<!-- -->{{rotate|<!-- -->{{translate|<!-- -->{{polygon|5| 100 * cos (0*(2*pi/5)), 100 * sin (0*(2*pi/5)); 100 * cos (1*(2*pi/5)), 100 * sin (1*(2*pi/5)); 100 * cos (2*(2*pi/5)), 100 * sin (2*(2*pi/5)); 100 * cos (3*(2*pi/5)), 100 * sin (3*(2*pi/5)); 100 * cos (4*(2*pi/5)), 100 * sin (4*(2*pi/5)); }}<!-- -->| 100, 0 }}<!-- -->| angle = 1*(2*pi/5) }}<!-- -->{{rotate|<!-- -->{{translate|<!-- -->{{polygon|5| 100 * cos (0*(2*pi/5)), 100 * sin (0*(2*pi/5)); 100 * cos (1*(2*pi/5)), 100 * sin (1*(2*pi/5)); 100 * cos (2*(2*pi/5)), 100 * sin (2*(2*pi/5)); 100 * cos (3*(2*pi/5)), 100 * sin (3*(2*pi/5)); 100 * cos (4*(2*pi/5)), 100 * sin (4*(2*pi/5)); }}<!-- -->| 100, 0 }}<!-- -->| angle = 2*(2*pi/5) }}<!-- -->{{rotate|<!-- -->{{translate|<!-- -->{{polygon|5| 100 * cos (0*(2*pi/5)), 100 * sin (0*(2*pi/5)); 100 * cos (1*(2*pi/5)), 100 * sin (1*(2*pi/5)); 100 * cos (2*(2*pi/5)), 100 * sin (2*(2*pi/5)); 100 * cos (3*(2*pi/5)), 100 * sin (3*(2*pi/5)); 100 * cos (4*(2*pi/5)), 100 * sin (4*(2*pi/5)); }}<!-- -->| 100, 0 }}<!-- -->| angle = 3*(2*pi/5) }}<!-- -->{{rotate|<!-- -->{{translate|<!-- -->{{polygon|5| 100 * cos (0*(2*pi/5)), 100 * sin (0*(2*pi/5)); 100 * cos (1*(2*pi/5)), 100 * sin (1*(2*pi/5)); 100 * cos (2*(2*pi/5)), 100 * sin (2*(2*pi/5)); 100 * cos (3*(2*pi/5)), 100 * sin (3*(2*pi/5)); 100 * cos (4*(2*pi/5)), 100 * sin (4*(2*pi/5)); }}<!-- -->| 100, 0 }}<!-- -->| angle = 4*(2*pi/5) }}<!-- -->| angle = 1*(pi/10) }}<!-- -->| 250, 250 }}<!-- -->}}<!-- --> |
yields |
|
Analog clock example
Cf. {{clock}} template.
Testing for different times
{| align="center" style="text-align: center;" |- style="text-align: center; | width="150px" | <div style="position: relative; width: 72px; height: 72px; align: center; text-align: center; padding: 0px; background: #f9f9f9; border: 1px solid darkgray; border-radius: 50%;"><!-- --><span style="position: absolute; left: 36px; top: 36px;">{{rotate| {{line|length = 24|color = #777}} | 90 - ( 08 ) * 360 / 12 - ( 20 ) * 360.0 / 720 | angle unit = deg }}</span><!-- --><span style="position: absolute; left: 36px; top: 36px;">{{rotate| {{line|length = 32|color = #777}} | 90 - ( 20 ) * 360 / 60 | angle unit = deg }}</span><!-- --><span style="position: absolute; left: 34px; top: 27px; font-size: 75%; color: #777;">•</span> {{nl|4}} 08:20 </div> | width="150px" | <div style="position: relative; width: 72px; height: 72px; align: center; text-align: center; padding: 0px; background: #f9f9f9; border: 1px solid darkgray; border-radius: 50%;"><!-- --><span style="position: absolute; left: 36px; top: 36px;">{{rotate| {{line|length = 24|color = #777}} | 90 - ( 10 ) * 360 / 12 - ( 10 ) * 360.0 / 720 | angle unit = deg }}</span><!-- --><span style="position: absolute; left: 36px; top: 36px;">{{rotate| {{line|length = 32|color = #777}} | 90 - ( 10 ) * 360 / 60 | angle unit = deg }}</span><!-- --><span style="position: absolute; left: 34px; top: 27px; font-size: 75%; color: #777;">•</span> {{nl|4}} 10:10 </div> | width="150px" | <div style="position: relative; width: 72px; height: 72px; align: center; text-align: center; padding: 0px; background: #f9f9f9; border: 1px solid darkgray; border-radius: 50%;"><!-- --><span style="position: absolute; left: 36px; top: 36px;">{{rotate| {{line|length = 24|color = #777}} | 90 - ( 12 ) * 360 / 12 - ( 30 ) * 360.0 / 720 | angle unit = deg }}</span><!-- --><span style="position: absolute; left: 36px; top: 36px;">{{rotate| {{line|length = 32|color = #777}} | 90 - ( 30 ) * 360 / 60 | angle unit = deg }}</span><!-- --><span style="position: absolute; left: 34px; top: 27px; font-size: 75%; color: #777;">•</span> {{nl|4}} 12:30 </div> | width="150px" | <div style="position: relative; width: 72px; height: 72px; align: center; text-align: center; padding: 0px; background: #f9f9f9; border: 1px solid darkgray; border-radius: 50%;"><!-- --><span style="position: absolute; left: 36px; top: 36px;">{{rotate| {{line|length = 24|color = #777}} | 90 - ( 03 ) * 360 / 12 - ( 00 ) * 360.0 / 720 | angle unit = deg }}</span><!-- --><span style="position: absolute; left: 36px; top: 36px;">{{rotate| {{line|length = 32|color = #777}} | 90 - ( 00 ) * 360 / 60 | angle unit = deg }}</span><!-- --><span style="position: absolute; left: 34px; top: 27px; font-size: 75%; color: #777;">•</span> {{nl|4}} 03:00 </div> | width="150px" | <div style="position: relative; width: 72px; height: 72px; align: center; text-align: center; padding: 0px; background: #f9f9f9; border: 1px solid darkgray; border-radius: 50%;"><!-- --><span style="position: absolute; left: 36px; top: 36px;">{{rotate| {{line|length = 24|color = #777}} | 90 - ( 05 ) * 360 / 12 - ( 50 ) * 360.0 / 720 | angle unit = deg }}</span><!-- --><span style="position: absolute; left: 36px; top: 36px;">{{rotate| {{line|length = 32|color = #777}} | 90 - ( 50 ) * 360 / 60 | angle unit = deg }}</span><!-- --><span style="position: absolute; left: 34px; top: 27px; font-size: 75%; color: #777;">•</span> {{nl|4}} 05:50 </div> | width="150px" | <div style="position: relative; width: 72px; height: 72px; align: center; text-align: center; padding: 0px; background: #f9f9f9; border: 1px solid darkgray; border-radius: 50%;"><!-- --><span style="position: absolute; left: 36px; top: 36px;">{{rotate| {{line|length = 24|color = #777}} | 90 - ( 06 ) * 360 / 12 - ( 00 ) * 360.0 / 720 | angle unit = deg }}</span><!-- --><span style="position: absolute; left: 36px; top: 36px;">{{rotate| {{line|length = 32|color = #777}} | 90 - ( 00 ) * 360 / 60 | angle unit = deg }}</span><!-- --><span style="position: absolute; left: 34px; top: 27px; font-size: 75%; color: #777;">•</span> {{nl|4}} 06:00 </div> | width="150px" | <div style="position: relative; width: 72px; height: 72px; align: center; text-align: center; padding: 0px; background: #f9f9f9; border: 1px solid darkgray; border-radius: 50%;"><!-- --><span style="position: absolute; left: 36px; top: 36px;">{{rotate| {{line|length = 24|color = #777}} | 90 - ( 09 ) * 360 / 12 - ( 15 ) * 360.0 / 720 | angle unit = deg }}</span><!-- --><span style="position: absolute; left: 36px; top: 36px;">{{rotate| {{line|length = 32|color = #777}} | 90 - ( 15 ) * 360 / 60 | angle unit = deg }}</span><!-- --><span style="position: absolute; left: 34px; top: 27px; font-size: 75%; color: #777;">•</span> {{nl|4}} 09:15 </div> |- |}
gives
•
|
•
|
•
|
•
|
•
|
•
|
•
|
UTC time and Server time analog displays
{| align="center" style="text-align: center;" |- | <span style="padding: 2px; color: white; background: black;">'''Time (UTC)'''</span> <div style="position: relative; width: 72px; height: 72px; text-align: center; padding: 0px; background: #f9f9f9; border: 1px solid darkgray; border-radius: 50%;"><!-- --><span style="position: absolute; left: 36px; top: 36px;"><!-- -->{{rotate|{{line|length = 24|color = #777}}| 90 - ( {{#explode:{{CURRENTTIME}}|:|0}} ) * 360 / 12 - ( {{#explode:{{CURRENTTIME}}|:|1}} ) * 360.0 / 720 | angle unit = deg }}</span><!-- --><span style="position: absolute; left: 36px; top: 36px;"><!-- -->{{rotate|{{line|length = 32|color = #777}}| 90 - ( {{#explode:{{CURRENTTIME}}|:|1}} ) * 360 / 60 | angle unit = deg }}<!-- --></span><!-- --><span style="position: absolute; left: 34px; top: 26px; font-size: 75%; color: #777;">•</span> </div> '''{{CURRENTTIME}}''' | width="50px" | {{nbsp}} | <span style="padding: 2px; color: white; background: black;">'''Time (Server)'''</span> <div style="position: relative; width: 72px; height: 72px; text-align: center; padding: 0px; background: #f9f9f9; border: 1px solid darkgray; border-radius: 50%;"><!-- --><span style="position: absolute; left: 36px; top: 36px;"><!-- -->{{rotate|{{line|length = 24|color = #777}}| 90 - ( {{#explode:{{LOCALTIME}}|:|0}} ) * 360 / 12 - ( {{#explode:{{LOCALTIME}}|:|1}} ) * 360.0 / 720 | angle unit = deg }}</span><!-- --><span style="position: absolute; left: 36px; top: 36px;"><!-- -->{{rotate|{{line|length = 32|color = #777}}| 90 - ( {{#explode:{{LOCALTIME}}|:|1}} ) * 360 / 60 | angle unit = deg }}<!-- --></span><!-- --><span style="position: absolute; left: 34px; top: 26px; font-size: 75%; color: #777;">•</span> </div> '''{{LOCALTIME}}''' |- |} <center>[http://oeis.org/w/index.php?title=Template:Rotate/doc#clock Click here to update the time snapshot!]</center>
yields
Time (UTC) •
06:09 |
Time (Server) •
01:09 |
{| align="center" style="text-align: center;" |- | <span style="padding: 2px; color: white; background: black;">'''Time (UTC)'''</span> {{canvas|width = 75|height = 75|background = none|border = none| {{circle<!-- ***** Time (UTC): Clock frame ***** --> |center = 50, 50|radius = 50|units = %|stroke = 1px solid darkgray|fill = #f9f9f9}} {{translate|<!-- ***** Time (UTC): Hours handle ***** -->{{line|length = 24|color = #777 | angle = 90 - ( {{#explode:{{CURRENTTIME}}|:|0}} ) * 360 / 12 - ( {{#explode:{{CURRENTTIME}}|:|1}} ) * 360.0 / 720 | angle unit = deg }}<!-- -->| offset = 50, 50 | unit = % }} {{translate|<!-- ***** Time (UTC): Minutes handle ***** -->{{line|length = 32|color = #777 | angle = 90 - ( {{#explode:{{CURRENTTIME}}|:|1}} ) * 360 / 60 | angle unit = deg }}<!-- -->| offset = 50, 50 | unit = % }} {{circle|center = 50, 50|radius = 1.75|units = %|stroke = none|fill = #777}} }} '''{{CURRENTTIME}}''' | width="50px" | {{nbsp}} | <span style="padding: 2px; color: white; background: black;">'''Time (Server)'''</span> {{canvas|width = 75|height = 75|background = none|border = none| {{circle<!-- ***** Time (Server): Clock frame ***** --> |center = 50, 50|radius = 50|units = %|stroke = 1px solid darkgray|fill = #f9f9f9}} {{translate|<!-- ***** Time (Server): Hours handle ***** -->{{line|length = 24|color = #777 | angle = 90 - ( {{#explode:{{LOCALTIME}}|:|0}} ) * 360 / 12 - ( {{#explode:{{LOCALTIME}}|:|1}} ) * 360.0 / 720 | angle unit = deg }}<!-- -->| offset = 50, 50 | unit = % }} {{translate|<!-- ***** Time (Server): Minutes handle ***** -->{{line|length = 32|color = #777 | angle = 90 - ( {{#explode:{{LOCALTIME}}|:|1}} ) * 360 / 60 | angle unit = deg }}<!-- -->| offset = 50, 50 | unit = % }} {{circle|center = 50, 50|radius = 1.75|units = %|stroke = none|fill = #777}} }} '''{{LOCALTIME}}''' |- |} <center>[http://oeis.org/w/index.php?title=Template:Rotate/doc#clock Click here to update the time snapshot!]</center>
yields
Time (UTC)
06:09 |
Time (Server)
01:09 |
Code
<noinclude>{{Documentation}}</noinclude><includeonly><!-- Usage: Comment as shown to avoid spurious whitespace characters (spaces, tabs, newlines) (Here, I used equal signs instead of hyphens because HTML comments cannot be nested) <!== ==>{{rotate|''element to rotate''<!== ==>| angle = ''counterclockwise angle (from positive x-axis)'' (default: 0) | angle unit = ''deg, rad, grad or turn'' (default: rad) | origin = ''rotation point (from top left of the element's bounding box)'' (default: 0% 0%) }}<!== ==> -->{{#switch: {{{angle unit|rad}}} <!-- -->| deg | rad | grad | turn = <!-- rotation (in degrees) about {{{origin|0% 0%}}} --><span style = "display: inline-block; position: absolute; transform: rotate({{#expr: - ( {{{angle|{{{2|0}}}}}} ) }}{{{angle unit|rad}}}); transform-origin: {{{origin|0% 0%}}}; -moz-transform: rotate({{#expr: - ( {{{angle|{{{2|0}}}}}} ) }}{{{angle unit|rad}}}); /* Firefox */ -moz-transform-origin: {{{origin|0% 0%}}}; /* Firefox */ -ms-transform: rotate({{#expr: - ( {{{angle|{{{2|0}}}}}} ) }}{{{angle unit|rad}}}); /* IE 9 */ -ms-transform-origin: {{{origin|0% 0%}}}; /* IE 9 */ -webkit-transform: rotate({{#expr: - ( {{{angle|{{{2|0}}}}}} ) }}{{{angle unit|rad}}}); /* Safari and Chrome */ -webkit-transform-origin: {{{origin|0% 0%}}}; /* Safari and Chrome */ -o-transform: rotate({{#expr: - ( {{{angle|{{{2|0}}}}}} ) }}{{{angle unit|rad}}}); /* Opera */ -o-transform-origin: {{{origin|0% 0%}}}; /* Opera */ ">{{{1|}}}</span><!-- -->| {{error| Rotate error: Invalid angle unit! }} <!-- -->}}</includeonly>
CSS Transforms
Cf. Help:CSS Transforms#CSS Transform origin.
Cf. Help:CSS Transforms#CSS Rotation.
See also
- {{clock}} template.
Drawing templates
- {{Canvas}}
- {{Square}}
- {{Round square}} ({{rounded corners square}})
- {{Rect}} ({{rectangle}})
- {{Round rect}} ({{rounded corners rectangle}})
- {{Polyline}}
- {{Polygon}} ({{closed polyline}})
- {{Regular polygon}}
Affine transforms templates
See Help:CSS Transforms.
- {{Origin}}
- {{Translate}} and {{transform-translate}}
- {{Flip}}
- {{Scale}} and {{transform-scale}}
- {{Rotate}} and {{transform-rotate}}
- {{SkewX}}
- {{SkewY}}
- {{Skew}} and {{transform-skew}}
- {{Affine}} ({{affine matrix}})
External links
- Rotate Elements with CSS Transformations — David Walsh Blog.
- CSS3 transform Property — W3Schools.com
- CSS3 transform-origin Property — W3Schools.com