This site is supported by donations to The OEIS Foundation.

Template:Scale

From OeisWiki
Jump to: navigation, search

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

100x100%

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

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

yields

100x100%

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

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

yields

100x100%

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

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

yields

100x100%

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






Affine transforms templates

See Help:CSS Transforms.




External links