This site is supported by donations to The OEIS Foundation.
Template:Scale
[⧼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.
Contents
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:
scaling factor, where sx is a real number (default: 1.0);x - sy:
scaling factor, where sy is a real number (default: sx);y - 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, Expression error: Unrecognized word "origin".); -moz-transform: scale(0.5, Expression error: Unrecognized word "origin".); /* Firefox */ -ms-transform: scale(0.5, Expression error: Unrecognized word "origin".); /* IE 9 */ -webkit-transform: scale(0.5, Expression error: Unrecognized word "origin".); /* Safari and Chrome */ -o-transform: scale(0.5, Expression error: Unrecognized word "origin".); /* 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, Expression error: Unrecognized word "origin".); -moz-transform: scale(0.5, Expression error: Unrecognized word "origin".); /* Firefox */ -ms-transform: scale(0.5, Expression error: Unrecognized word "origin".); /* IE 9 */ -webkit-transform: scale(0.5, Expression error: Unrecognized word "origin".); /* Safari and Chrome */ -o-transform: scale(0.5, Expression error: Unrecognized word "origin".); /* 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 |
|
Code
CSS Transforms
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