This site is supported by donations to The OEIS Foundation.
Template:SkewY
[⧼Purge⧽ Template:SkewY]
The {{skewY}} affine transform template skews an element along Y 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).
Contents
Usage
{{skewY| ''element to skew'' | angle = ''counterclockwise angle'' (default: 0) | angle unit = deg, rad, or grad (default: rad) | origin = ''x y'' (default: 50% 50%) }}
or
- {{skewY|element to skew along Y|angle = counterclockwise angle (default: 0)|angle unit = deg, rad, or grad (default: rad)}}
or
- {{skewY|element to skew along Y|angle = counterclockwise angle (default: 0)}}
or
- {{skewY|element to skew along Y|counterclockwise angle (default: 0)}}
or (identity operation, since skewing is with default angle, i.e. 0)
- {{skewY|element to skew along Y}}
Valid input
- angle: angle (positive is counterclockwise) 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 }} }} |
|
Examples with invalid input
(...)
CSS Transforms
Cf. Help:CSS Transforms#CSS Transform origin.
Cf. Help:CSS Transforms#CSS Skewing.
See also
Drawing templates
- {{Canvas}}
- {{Square}}
- {{Round square}} ({{rounded corners square}})
- {{Rect}} ({{rectangle}})
- {{Round rect}} ({{rounded corners rectangle}})
- {{Polyline}}
- {{Polygon}} ({{closed polyline}})
- {{Regular polygon}}
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