Template:Transform-skew

The following documentation is located at Template:Transform-skew/doc. [<Edit> Template:Transform-skew/doc]
[⧼Purge⧽ Template:Transform-skew]

The {{transform-skew}} cross-browser compatibility template gives the CSS code for skewing elements inside the style attribute. Use it inside the style="" attribute of HTML elements like other CSS properties.

Usage

<span style="{{transform-skew|angle along X (in degrees)|angle along Y (in degrees)}}">element to skew</span>

or

<span style="{{transform-skew|angle along X (in degrees)|angle along Y (in degrees)|display = display}}">element to skew</span>

with arguments

• angle along X (in degrees): first unnamed parameter {{{1|0}}} for skewing angle along X (in degree, default 0).

Positive values skews counterclockwise along X, negative values skews clockwise along X.

• angle along Y (in degrees): second unnamed parameter {{{2|0}}} for skewing angle along Y (in degree, default 0).

Positive values skews clockwise along Y, negative values skews counterclockwise along Y.

• display: the named parameter display allows you to change the CSS display property. It defaults to inline-block;.

When using this template to create the skewing 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 skewing 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 unskewed, so you may adjust the position and padding to avoid unwanted overlapping. Use the display parameter to further control positioning.

Syntax		Result
Some skewed characters:
<span style="{{transform-skew|-40}}">A</span> <span style="{{transform-skew|-20}}">B</span> <span style="{{transform-skew|0}}">C</span> <span style="{{transform-skew|20}}">D</span> <span style="{{transform-skew|40}}">E</span>		A B C D E
<span style="{{transform-skew|-40|0}}">A</span> <span style="{{transform-skew|-20|0}}">B</span> <span style="{{transform-skew|0|0}}">C</span> <span style="{{transform-skew|20|0}}">D</span> <span style="{{transform-skew|40|0}}">E</span>		A B C D E
<span style="{{transform-skew|0|-40}}">A</span> <span style="{{transform-skew|0|-20}}">B</span> <span style="{{transform-skew|0|0}}">C</span> <span style="{{transform-skew|0|20}}">D</span> <span style="{{transform-skew|0|40}}">E</span>		A B C D E
Some skewed special characters (useful when the font-family has no italic or oblique font):
<span style="{{transform-skew|-40}}">∫</span> <span style="{{transform-skew|-20}}">∫</span> <span style="{{transform-skew|0}}">∫</span> <span style="{{transform-skew|20}}">∫</span> <span style="{{transform-skew|40}}">∫</span>		∫ ∫ ∫ ∫ ∫
Or with arbitrary text:
<span style="{{transform-skew|-45}}">This skewed rightwards text{{nl}}is vertically{{nl}}aligned at bottom.</span>{{nl|3}}<span style="{{transform-skew|45}}">This skewed leftwards text{{nl}}is vertically{{nl}}aligned at bottom.</span>		This skewed rightwards text is vertically aligned at bottom. This skewed leftwards text is vertically aligned at bottom.
This is a placeholder image. It is skewed 30 degrees clockwise along X.
<div style="position: relative; top: 0px; left: 0px; {{transform-skew|-30|display = block}}">[[File:Clockface.png|200px]]</div>
This is a placeholder image. It is skewed 30 degrees clockwise along Y.
<div style="position: relative; top: 0px; left: 0px; {{transform-skew|30|display = block}}">[[File:Clockface.png|200px]]</div>
This is a placeholder image. It is skewed 30 degrees clockwise along X and 30 degrees counterclockwise along Y.
<div style="position: relative; top: 0px; left: 0px; {{transform-skew|-30|-30|display = block}}">[[File:Clockface.png|200px]]</div>
This is a placeholder image. It is skewed 30 degrees clockwise along X and 30 degrees clockwise along Y.
<div style="position: relative; top: 0px; left: 0px; {{transform-skew|-30|30|display = block}}">[[File:Clockface.png|200px]]</div>
This is a skewed text.
<div style="border: 3px solid red; width: 150px; position: relative; top: 50px; opacity: 0.5; {{transform-skew|-30|15|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}}

External links

• https://docs.webplatform.org/wiki/tutorials/css_transforms