This site is supported by donations to The OEIS Foundation.

Template:SkewY

From OeisWiki
Jump to: navigation, search

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).

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
   }}
  
}}
 
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






Affine transforms templates

See Help:CSS Transforms.




External links