This site is supported by donations to The OEIS Foundation.
Template:Transform-rotate
[⧼Purge⧽ Template:Transform-rotate]
The {{transform-rotate}} cross-browser compatibility template gives the CSS code for rotating elements inside the style attribute. Use it inside the style=""
attribute of HTML elements like other CSS properties.
Contents
Usage
-
<span style="{{transform-rotate|angle (in degrees)}}">element to rotate</span>
or
-
<span style="{{transform-rotate|angle (in degrees)|display = display}}">element to rotate</span>
with arguments
-
angle (in degrees)
: first unnamed parameter{{{1|0}}}
for rotation angle (in degree, default 0).
- Positive values rotate clockwise, negative values rotate counterclockwise.
-
display
: the named parameterdisplay
allows you to change the CSS display property. It defaults toinline-block;
.
When using this template to create the rotating effect, editors should consider carefully about the accessibility.
Note: This template is not supported by IE8 or older. IE8 requires cumbersome calculating of matrices.
Examples
The rotating happens at the center of the object's bounding box and it's effective dimensions will retain the original values of the object as if unrotated, so you may adjust the position and padding to avoid unwanted overlapping. Use the display
parameter to further control positioning.
Syntax | Result | |
---|---|---|
| ||
<span style="{{transform-rotate|90}}">A</span> <span style="{{transform-rotate|180}}">B</span> <span style="{{transform-rotate|270}}">C</span> <span style="{{transform-rotate|360}}">D</span>
|
A B C D | |
| ||
<span style="font-size: 1.4em; {{transform-rotate|0}}">∫</span> <span style="font-size: 1.4em; {{transform-rotate|20}}">∫</span> <span style="font-size: 1.4em; {{transform-rotate|40}}">∫</span> <span style="font-size: 1.4em; {{transform-rotate|60}}">∫</span>
|
∫ ∫ ∫ ∫ | |
| ||
<span style="{{transform-rotate|0}}">0</span> <span style="{{transform-rotate|10}}">1</span> <span style="{{transform-rotate|20}}">2</span> <span style="{{transform-rotate|30}}">3</span> <span style="{{transform-rotate|40}}">4</span> <span style="{{transform-rotate|50}}">5</span> <span style="{{transform-rotate|60}}">6</span> <span style="{{transform-rotate|70}}">7</span> <span style="{{transform-rotate|80}}">8</span> <span style="{{transform-rotate|90}}">9</span>
|
0 1 2 3 4 5 6 7 8 9 | |
| ||
<span style="{{transform-rotate|-90}}">This upwards text{{nl}}is vertically{{nl}}aligned at bottom.</span>{{nl|3}}<span style="{{transform-rotate|-180}}">This text is upside down.</span>
|
This upwards text is vertically aligned at bottom. This text is upside down. | |
| ||
<div style="position: relative; top: 0px; left: 0px; {{transform-rotate|90}}">[[File:Clockface.png|200px]]</div>
|
||
| ||
<div style="border: 3px solid red; width: 150px; position: relative; left: 0px; top: 50px; opacity: 0.5; {{transform-rotate|-10|display = block}}">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
See also
- {{transform-translate}}
- {{transform-scale}} ({{flipX}} and {{flipY}})
- {{transform-rotate}}
- {{transform-skew}}
- {{transform}}