Template:SkewX/doc

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

[⧼Purge⧽ Template:SkewX/doc]

The {{skewX}} affine transform template skews an element along X about a given origin (skew point, from left top of the element's bounding box, which defaults to the center of it's bounding box).

Usage

{{skewX| ''element to skew''
| angle = ''clockwise angle'' (default: 0) | angle unit = deg, rad, or grad (default: rad)
| origin = ''x y'' (default: 50% 50%)
}}

or

{{skewX|element to skew along X|angle = clockwise angle (default: 0)|angle unit = deg, rad, or grad (default: rad)}}

or

{{skewX|element to skew along X|angle = clockwise angle (default: 0)}}

or

{{skewX|element to skew along X|clockwise angle (default: 0)}}

or (identity operation, since skewing is with default angle, i.e. 0)

{{skewX|element to skew along X}}

Valid input

• angle: angle (positive is clockwise) as a real number (default: 0);
• angle unit: deg, rad or grad (default: rad);
• origin: x y origin (from top left of the element's bounding box) used as skew point (default: 50% 50%), with units among %, px, cm, mm, in, pt, pc, em, ex.

Examples

Examples with valid input

Note: with Firefox 22.0, the supported stroke styles for [the rounded portions of] the rounded corners seems to be only solid or none, although for the straight portions of the stroke, the dashed and dotted styles are also supported! (For the {{ellipse}} and {{circle}} templates, where we have nothing but rounded portions, the supported stroke styles also seem to be only solid or none.)

Note: you can see that the strokes are drawn on the outside of the bounding boxes.

Code		Result
{{canvas| width = 500 | height = 500 | float = right |<!-- -->{{translate|<!-- -->{{rectangle | width = 350 | height = 250 | stroke width = 5 | units = px | stroke = solid gold | fill = white }}<!-- -->| 250, 250 }}<!-- -->{{translate|<!-- -->{{skewX|<!-- -->{{rectangle | width = 250 | height = 150 | stroke width = 5 | units = px | stroke = solid orange | fill = transparent | content = <span style{{=}}"color: orange;">I'm orange,{{nl}}<!-- -->skewed 15{{sym|deg}} along X,{{nl}}then translated!</span> }}<!-- -->| angle = 15 | angle unit = deg }}<!-- -->| 250, 250 }}<!-- -->{{translate|<!-- -->{{skewY|<!-- -->{{rectangle | width = 250 | height = 150 | stroke width = 5 | units = px | stroke = solid green| fill = transparent | content = <span style{{=}}"color: green;">I'm green,{{nl}}<!-- -->skewed 15{{sym|deg}} along Y,{{nl}}then translated!</span> }}<!-- -->| angle = 15 | angle unit = deg }}<!-- -->| 250, 250 }}<!-- -->{{translate|<!-- -->{{round rect | width = 120 | height = 60 | stroke width = 2 | units = px | stroke = solid rgba(0, 0, 0, 0.5) | fill = rgba(255, 255, 0, 0.25) | border-radius = 50% 50% 0 0 / 100% 100% 0 0 | content = I'm yellow,{{nl}} a half circle. }}<!-- -->| 85, 445 }}<!-- -->{{translate|<!-- -->{{skewX|<!-- -->{{round rect | width = 120 | height = 60 | stroke width = 2 | units = px | stroke = solid rgba(0, 0, 0, 0.5) | fill = rgba(255, 255, 0, 0.25) | border-radius = 50% 50% 0 0 / 100% 100% 0 0 | content = I'm yellow,{{nl}}<!-- -->skewed 45{{sym|deg}} along X, half circle. }}<!-- -->| angle = 45 | angle unit = deg }}<!-- -->| 445, 445 }}<!-- -->{{translate|<!-- -->{{skewY|<!-- -->{{round rect | width = 120 | height = 60 | stroke width = 2 | units = px | stroke = solid rgba(0, 0, 0, 0.5) | fill = rgba(255, 255, 0, 0.25) | border-radius = 50% 50% 0 0 / 100% 100% 0 0 | content = I'm yellow,{{nl}}<!-- -->skewed 45{{sym|deg}} along Y, half circle. }}<!-- -->| angle = 45 | angle unit = deg }}<!-- -->| 250, 445 }}<!-- -->{{translate|<!-- -->{{round rect | width = 100 | height = 100 | stroke width = 2 | units = px | stroke = solid purple | fill = cyan | border-radius = 0 0 100% 0 | content = A quarter{{nl}}circle. }}<!-- -->| 440, 60 }}<!-- -->{{translate|<!-- -->{{skewX|<!-- -->{{round rect | width = 100 | height = 100 | stroke width = 2 | units = px | stroke = solid purple | fill = cyan | border-radius = 0 0 100% 0 | content = A skewed{{nl}}<!-- -->(45{{sym|deg}} along X){{nl}}quarter{{nl}}circle. }}<!-- -->| angle = 45 | angle unit = deg }}<!-- -->| 60, 60 }}<!-- -->{{translate|<!-- -->{{skewY|<!-- -->{{round rect | width = 100 | height = 100 | stroke width = 2 | units = px | stroke = solid purple | fill = cyan | border-radius = 0 0 100% 0 | content = A skewed{{nl}}<!-- -->(45{{sym|deg}} along Y){{nl}}quarter{{nl}}circle. }}<!-- -->| angle = 45 | angle unit = deg }}<!-- -->| 250, 60 }} }}		I'm orange, skewed 15° along X, then translated! I'm green, skewed 15° along Y, then translated! I'm yellow, a half circle. I'm yellow, skewed 45° along X, half circle. I'm yellow, skewed 45° along Y, half circle. A quarter circle. A skewed (45° along X) quarter circle. A skewed (45° along Y) quarter circle.

Examples with invalid input

(...)

CSS Transforms

Cf. Help:CSS Transforms#CSS Transform origin.
Cf. Help:CSS Transforms#CSS Skewing.

See also

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

• CSS3 transform Property — W3Schools.com
• CSS3 transform-origin Property — W3Schools.com