Caleb Cooper at 20:53, 10 November 2020

2020-11-10T20:53:41Z

← Older revision		Revision as of 20:53, 10 November 2020
Line 1:		Line 1:
	{{Documentation subpage}}		{{Documentation subpage}}
	<!-- Categories and interwikis go at the bottom of this page. -->		<!-- Categories and interwikis go at the bottom of this page. -->
	A shorthanded [[Cascading style sheet\|CSS]] code for rotating elements inside style attribute. Use it inside the <code>style=""</code> attribute of HTML elements like other CSS properties.		A shorthanded [[Wikipedia:Cascading style sheet\|CSS]] code for rotating elements inside style attribute. Use it inside the <code>style=""</code> attribute of HTML elements like other CSS properties.

	*First unnamed parameter <code>{{{1}}}</code> for rotation angle (in degree). Positive values rotate right, negative values rotate left.		*First unnamed parameter <code>{{{1}}}</code> for rotation angle (in degree). Positive values rotate right, negative values rotate left.
	*The named parameter {{para\|display}} allows you to change the CSS display property. It defaults to <code>display: inline-block;</code>		*The named parameter {{para\|display}} allows you to change the CSS display property. It defaults to <code>display: inline-block;</code>

	When using this template to create the rotating effect, editors should consider carefully about the [[WP:accessibility\|accessibility]].		When using this template to create the rotating effect, editors should consider carefully about the [[Wikipedia:WP:accessibility\|accessibility]].

	''{{A note}} This template does not support IE8 or older. IE8 requires cumbersome calculating of matrices. You may implement it into this template if you know how to translate the formula into [[Wikipedia:Lua\|Lua]].''		''{{A note}} This template does not support IE8 or older. IE8 requires cumbersome calculating of matrices. You may implement it into this template if you know how to translate the formula into [[Wikipedia:Lua\|Lua]].''
Line 74:		Line 74:
	[[Category:Graphics templates]]		[[Category:Graphics templates]]

	[[ru:Шаблон:Rotate]]
	[[zh:Template:Rotate]]
	}}</includeonly>		}}</includeonly>

Caleb Cooper: Created page with "{{Documentation subpage}} A shorthanded CSS code for rotating elements inside style..."

2020-11-10T20:52:45Z

Created page with "{{Documentation subpage}}  A shorthanded CSS code for rotating elements inside style..."

New page

{{Documentation subpage}}

A shorthanded [[Cascading style sheet|CSS]] code for rotating elements inside style attribute. Use it inside the <code>style=""</code> attribute of HTML elements like other CSS properties.

*First unnamed parameter <code>{{{1}}}</code> for rotation angle (in degree). Positive values rotate right, negative values rotate left.
*The named parameter {{para|display}} allows you to change the CSS display property. It defaults to <code>display: inline-block;</code>

When using this template to create the rotating effect, editors should consider carefully about the [[WP:accessibility|accessibility]].

''{{A note}} This template does not support IE8 or older. IE8 requires cumbersome calculating of matrices. You may implement it into this template if you know how to translate the formula into [[Wikipedia:Lua|Lua]].''

==Examples==
The rotating happens at the center of the object and its 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 <code>display=</code> parameter to further control positioning.

{|class=wikitable
!Syntax!!Result
|- style="vertical-align:top;"
|colspan=2|
*'''Some rotated characters:'''
|-
|<syntaxhighlight lang="html">5 5 5 5</syntaxhighlight>
|5 5 5 5
|-
|colspan=2|
*'''Some rotated special characters ''(useful when the font-family has no italic or oblique font)'':'''
|-
|<syntaxhighlight lang="html">∫ ∫ ∫ ∫</syntaxhighlight>
|∫ ∫ ∫ ∫
|-
|colspan=2|
*'''Works with numbers, too'''
|-
|<syntaxhighlight lang="html">0 1 2 3 4 5 6 7 8 9</syntaxhighlight>
|0 1 2 3 4 5 6 7 8 9
|-
|colspan=2|
*'''Or with arbitrary text'''
|-
|<syntaxhighlight lang="html">This text is vertically aligned.   This text is upside down.</syntaxhighlight>
|This text is vertically aligned.   This text is upside down.
|-
|colspan=2|
*'''This is a placeholder image, It is rotated 90 degrees clockwise.'''
|-style="vertical-align:top;"
|<syntaxhighlight lang="html"><div style="position:relative; top:0px; left:0px; {{Transform-rotate|90|display=block}}">[[file:Image PlaceHolder.png|200px]]</div></syntaxhighlight>
|<div style="position:relative; top:0px; left:0px; {{Transform-rotate|90|display=block}}">[[file:Image PlaceHolder.png|200px]]</div>
|-
|colspan=2|
*'''This is a red horizontal line drawn across the text at the angle of 30 degree anticlockwise.'''
|-style="vertical-align:top;"
|<syntaxhighlight lang="html"><div style="border:3px solid red; width:150px; position:relative; top:50px; opacity:0.5; {{Transform-rotate|-30|display=block}}"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</syntaxhighlight>
|<div style="border:3px solid red; width:150px; position:relative; top:50px; opacity:0.5; {{Transform-rotate|-30|display=block}}"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|}

Serious bug:

{|class=wikitable
!Syntax!!Result
|-
| <syntaxhighlight lang="html">The text will be rotated, but not the space the text need to display. So the cell is not tall enough, but much much too wide.</syntaxhighlight>
| The text will be rotated, but not the space the text need to display. So the cell is not tall enough, but much much too wide.
|-
|}

==See also:==

* {{tl|MirrorH}}
* {{tl|transform}}

<includeonly>{{Sandbox other||

[[Category:Cross-browser compatibility templates]]
[[Category:Graphics templates]]

[[ru:Шаблон:Rotate]]
[[zh:Template:Rotate]]
}}</includeonly>

Template:Transform-rotate/doc - Revision history

Caleb Cooper at 20:53, 10 November 2020

Caleb Cooper: Created page with "{{Documentation subpage}} A shorthanded CSS code for rotating elements inside style..."