Template:Scale

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

The {{scale}} affine transform template scales an element about a given origin (reference point, from left top of the element's bounding box), which defaults to the center of it's bounding box.

Usage

{{scale|element to scale|sx = sx (default: 1.0)|sy = sy (default: sx)|origin = origin (default: 50% 50%)}}

or

{{scale|element to scale|sx (default: 1.0)|sy (default: sx)|origin (default: 50% 50%)}}

with parameters

• sx: 

  x

  scaling factor, where sx is a real number (default: 1.0);
• sy: 

  y

  scaling factor, where sy is a real number (default: sx);
• origin: fixed point about which the scaling is done as top left, top right, bottom left, bottom right, center or nn% nn% as percentage of height and width from left top corner of the element's bounding box (default: 50% 50%).

Examples

Examples with valid input

Scaling text (with default origin, i.e. at center of element box)

Scaling text (default sx and sy)

The code

<span style="font-size: 24px; color: rgba(255, 0, 0, 0.5);">The On-Line Encyclopedia of Integer Sequences® (OEIS®)</span>

yields

The On-Line Encyclopedia of Integer Sequences® (OEIS®)

The code

{{scale|<span style{{=}}"font-size: 24px; color: rgba(255, 0, 0, 0.5);">The On-Line Encyclopedia of Integer Sequences® (OEIS®)</span>}}

yields (default is scaling factors of 1.0, i.e. no scaling)

The On-Line Encyclopedia of Integer Sequences® (OEIS®)

Scaling text (default sy)

The code

{{scale|<span style {{=}} "font-size: 24px; color: rgba(255, 0, 0, 0.5);">The On-Line Encyclopedia of Integer Sequences® (OEIS®)</span>|1.5}}

yields (you can see that it scaled about the center of the text's bounding box)

The On-Line Encyclopedia of Integer Sequences® (OEIS®)

The code

{{scale|<span style {{=}} "font-size: 24px; color: rgba(255, 0, 0, 0.5);">The On-Line Encyclopedia of Integer Sequences® (OEIS®)</span>|0.5}}

yields (you can see that it scaled about the center of the text's bounding box)

The On-Line Encyclopedia of Integer Sequences® (OEIS®)

The code

{{scale|<span style {{=}} "font-size: 24px; color: rgba(255, 0, 0, 0.5);">The On-Line Encyclopedia of Integer Sequences® (OEIS®)</span>|0.5|origin {{=}} bottom right}}

yields

<span style = "display: inline-block; position: absolute;

transform: scale(0.5, ); -moz-transform: scale(0.5, ); /* Firefox */ -ms-transform: scale(0.5, ); /* IE 9 */ -webkit-transform: scale(0.5, ); /* Safari and Chrome */ -o-transform: scale(0.5, ); /* Opera */

transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; /* Firefox */ -ms-transform-origin: 50% 50%; /* IE 9 */ -webkit-transform-origin: 50% 50%; /* Safari and Chrome */ -o-transform-origin: 50% 50%; /* Opera */

">The On-Line Encyclopedia of Integer Sequences® (OEIS®)</span>

The code

{{scale|<span style {{=}} "font-size: 24px; color: rgba(255, 0, 0, 0.5);">The On-Line Encyclopedia of Integer Sequences® (OEIS®)</span>|0.5|origin {{=}} 100% 100%}}

yields

<span style = "display: inline-block; position: absolute;

transform: scale(0.5, ); -moz-transform: scale(0.5, ); /* Firefox */ -ms-transform: scale(0.5, ); /* IE 9 */ -webkit-transform: scale(0.5, ); /* Safari and Chrome */ -o-transform: scale(0.5, ); /* Opera */

transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; /* Firefox */ -ms-transform-origin: 50% 50%; /* IE 9 */ -webkit-transform-origin: 50% 50%; /* Safari and Chrome */ -o-transform-origin: 50% 50%; /* Opera */

">The On-Line Encyclopedia of Integer Sequences® (OEIS®)</span>

Scaling text

The code

{{scale|<span style {{=}} "font-size: 24px; color: rgba(255, 0, 0, 0.5);">The On-Line Encyclopedia of Integer Sequences® (OEIS®)</span>|1.0|4.0}}

yields

The On-Line Encyclopedia of Integer Sequences® (OEIS®)

Flipping text

The code

{{scale|<span style {{=}} "font-size: 24px; color: rgba(255, 0, 0, 0.5);">The On-Line Encyclopedia of Integer Sequences® (OEIS®)</span>|-1.0}}

yields (horizontal and vertical flip)

The On-Line Encyclopedia of Integer Sequences® (OEIS®)

The code

{{scale|<span style {{=}} "font-size: 24px; color: rgba(255, 0, 0, 0.5);">The On-Line Encyclopedia of Integer Sequences® (OEIS®)</span>|1.0|-1.0}}

yields (vertical flip)

The On-Line Encyclopedia of Integer Sequences® (OEIS®)

The code

{{scale|<span style {{=}} "font-size: 24px; color: rgba(255, 0, 0, 0.5);">The On-Line Encyclopedia of Integer Sequences® (OEIS®)</span>|-1.0|1.0}}

yields (horizontal flip)

The On-Line Encyclopedia of Integer Sequences® (OEIS®)

Scaling an image (with default origin, i.e. at center of image box)

The image File:WalkingTheCircle.png (326 × 296 pixels 2), shown via the code

{{canvas|width = 350|height = 350|units = px|{{image|Clockface.png}}}}

yields

scaled 1.0 (i.e. 100%, no scaling) with the code

{{canvas|width = 350|height = 350|units = px|{{scale|{{image|Clockface.png}}}}}}{{-}}

yields

and scaled 0.5 (i.e. 50%) with the code

{{canvas|width = 350|height = 350|units = px|{{scale|{{image|Clockface.png}}|0.5}}}}{{-}}

yields

and scaled 0.25 (i.e. 25%) with the code

{{canvas|width = 350|height = 350|units = px|{{scale|{{image|Clockface.png}}|0.25}}}}{{-}}

yields

More elaborate examples

Works properly: Observe the difference between scaling before translating (e.g. the dotted gold pentagons) and translating before scaling (in which case the scaling is done relative to the center of the polygon before it was translated, because the origin used for scaling is not translated) (e.g. the solid red pentagons, scaled relative to the bottom left corner of the canvas, the center of the pentagons before translation).

<!-- -->{{canvas|width = 500|height = 500|float = right|<!-- -->{{regular polygon| 5 | z-index = 0 | radius = 150 | stroke width = 2 | units = px | stroke color = black | stroke style = dashed }}<!-- -->{{scale|<!-- -->{{regular polygon| 5 | z-index = 0 | radius = 150 | stroke width = 2 | units = px | stroke color = black | stroke style = dashed }}<!-- -->| 0.25 }}<!-- -->{{translate|<!-- -->{{regular polygon| 5 | z-index = 0 | radius = 200 | stroke width = 2 | units = px | stroke color = gold | stroke style = dotted }}<!-- -->| 250, 250 }}<!-- -->{{translate|<!-- -->{{scale|<!-- -->{{regular polygon| 5 | z-index = 0 | radius = 200 | stroke width = 2 | units = px | stroke color = gold | stroke style = dotted }}<!-- -->| 0.5 }}<!-- -->| 250, 250 }}<!-- -->{{translate|<!-- -->{{scale|<!-- -->{{regular polygon| 5 | z-index = 0 | radius = 200 | stroke width = 2 | units = px | stroke color = gold | stroke style = dotted }}<!-- -->| 0.25 }}<!-- -->| 250, 250 }}<!-- -->{{scale|<!-- -->{{translate|<!-- -->{{regular polygon| 5 | z-index = 0 | radius = 150 | stroke width = 2 | units = px | stroke color = red | stroke style = solid }}<!-- -->| 250, 250 }}<!-- -->| 1.0 }}<!-- -->{{scale|<!-- -->{{translate|<!-- -->{{regular polygon| 5 | z-index = 0 | radius = 150 | stroke width = 2 | units = px | stroke color = red | stroke style = solid }}<!-- -->| 250, 250 }}<!-- -->| 0.5 }}<!-- -->{{scale|<!-- -->{{translate|<!-- -->{{regular polygon| 5 | z-index = 0 | radius = 150 | stroke width = 2 | units = px | stroke color = red | stroke style = solid }}<!-- -->| 250, 250 }}<!-- -->| 0.25 }}<!-- -->}}<!-- -->

yields

CSS Transforms

• Help:CSS Transforms#CSS Transform origin.
• Help:CSS Transforms#CSS Scaling.

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