Template:Rotate/doc

This documentation subpage contains instructions, categories, or other information for Template:Rotate. [<Edit> Template:Rotate]

[⧼Purge⧽ 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).

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|→|i}}	<span style="display: inline-block; position: absolute; -moz-transform: rotate(rad); /* Firefox */ -ms-transform: rotate(rad); /* IE 9 */ -webkit-transform: rotate(rad); /* Safari and Chrome */ -o-transform: rotate(rad); /* Opera */ transform: rotate(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

• 08:20

• 10:10

• 12:30

• 03:00

• 05:50

• 06:00

• 09:15

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) • 03:01

Time (Server) • 23:01

Click here to update the time snapshot!

{| 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) 03:01

Time (Server) 23:01

Click here to update the time snapshot!

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}}

• {{Draw text}}
• {{Image}}

• {{Point}}
• {{Line}}

• {{Square}}
• {{Round square}} ({{rounded corners square}})
• {{Rect}} ({{rectangle}})
• {{Round rect}} ({{rounded corners rectangle}})

• {{Polyline}}
• {{Polygon}} ({{closed polyline}})
• {{Regular polygon}}

• {{Circle}}
• {{Ellipse}}

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