Css scale height transform

The World of CSS Transforms

Like so many things in CSS, the transform property is surprisingly remarkable.

At first glance, it may seem like a pretty niche thing. How often do we need to rotate or skew something, after all? And yet, the more I learn about transform , the more I find myself taking advantage of it. In my blog’s codebase, I’ve used the transform property more than 350 times!

In this blog post, we’re diving deep into the transform property. I’ll show you some of the cool and unexpected things you can do with it!

This tutorial is intended to be beginner-friendly, though I do assume that you’re already comfortable with the fundamentals of HTML/CSS.

Unless you’re a seasoned CSS expert, I bet you’ll learn something neat!

The transform property can do a whole bunch of different things, through the use of transform functions like translate and skew .

Let’s look at each in turn.

Translation allows us to move an item around:

We can use translate to shift an item along in either axis: x moves side to side, y moves up and down. Positive values move down and to the right. Negative values move up and to the left.

Critically, the item’s in-flow position doesn’t change. As far as our layout algorithms are concerned, from Flow to Flexbox to Grid, this property has no effect.

For example: in this visualization, we have 3 children aligned using Flexbox. When we apply a transform to the middle child, the Flexbox algorithm doesn’t notice, and keeps the other children in the same place:

This is similar to how top / left / right / bottom work in positioned layout, with relatively-positioned elements.

When we want to move an element along a single axis, we can use translateX and translateY :

There’s one thing that makes translate ridiculously powerful, though. Something totally unique in the CSS language.

When we use a percentage value in translate , that percentage refers to the element’s own size, not the available space within the parent container.

Setting transform: translateY(-100%) moves the box up by its exact height, no matter what that height is, to the pixel.

This is incredibly handy when we want an element to sit just outside another one:

Code Playground

style> 
 
.parent  
 
position: relative; 
 
> 
 
.child  
 
width: 50px; 
 
height: 50px; 
 
/*
 Put the child in the
 top-right corner…
 */ 
 
position: absolute; 
 
top: 0; 
 
right: 0; 
 
/*
 …and then shift it up to
 sit just outside:
 */ 
 
transform: translateY(-100%); 
 
> 
 
style> 
 
div class="parent"> 
 
div class="child">div> 
 
div>

You might be wondering why this is such a big deal. After all, the above layout could be built with Flexbox or Grid, right? If we set .parent and .child to be siblings?

A common usecase for this trick is to add a «close» button just outside a dialog box:

Code Playground

style> 
 
.dialog-content  
 
position: relative; 
 
> 
 
.close-btn  
 
position: absolute; 
 
top: 0; 
 
right: 0; 
 
transform: translateY(-100%); 
 
> 
 
style> 
 
div class="dialog-wrapper"> 
 
div class="dialog-content"> 
 
button class="close-btn"> 
 
svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">line x1="18" y1="6" x2="6" y2="18">line>line x1="6" y1="6" x2="18" y2="18">line>svg> 
 
span class="visually-hidden"> 
 Dismiss dialog
 
span> 
 
button> 
 
div> 
 
div>

With the magic of calc , we can even mix relative and absolute units:

This allows us to add a «buffer», so that we can translate something by its own size plus a few extra pixels.

Alright, let’s look at another transform function!

scale allows us to grow or shrink an element:

Scale uses a unitless value that represents a multiple, similar to line-height . scale(2) means that the element should be 2x as big as it would normally be.

We can also pass multiple values, to scale the x and y axis independently:

At first glance, this might seem equivalent to setting width and height , but there’s one big difference.

Check out what happens when our element has some text in it:

The text scales up and down with the element. We aren’t just transforming the size and shape of the box, we’re transforming the entire element and all of its descendants.

This reveals an important truth about transforms: elements are flattened into a texture. All of these transforms essentially treat our element like a flat image, warping and contorting it as you might in Photoshop.

Incidentally, this is what makes transform such a good choice for animations!

Think about how much work is required when we change something like width . All of the layout algorithms need to re-run, figuring out exactly where this element and all of its siblings should be. If the element has text inside, the line-wrapping algorithm needs to figure out if this new width affects the line breaks. Then, the paint algorithms run, figuring out which color every pixel needs to be, and filling it in.

It’s fine to do this once when the page loads, but when we animate something, we need to do all of those calculations many many times a second. With transforms, we can skip a bunch of steps. This means that the calculations run quicker, leading to smoother motion.

It may seem like a bummer that scale will stretch/squash the element’s contents, but we can actually use this effect to our advantage. For example, check out this old-timey TV power animation:

For this animation, the squashing effect actually improves the effect!

And, if we really don’t want our text to squash, we can apply an inverse transform to the child.

This is an advanced technique, far beyond the scope of this blog post, but know that it’s possible to use scale to increase an element’s size without distorting its children. Libraries like Framer Motion take advantage of this fact to build highly-performant animations without stretching or squashing.

You guessed it: rotate will rotate our elements:

We typically use the deg unit for rotation, short for degrees. But there’s another handy unit we can use, one which might be easier to reason about:

The turn unit represents how many turns the element should make. 1 turn is equal to 360 degrees.

It’s obscure, but well-supported; the turn unit goes all the way back to IE 9!

Finally, skew is a seldom-used but pretty-neat transformation:

As with translate , we can skew along either axis:

Skew can be useful for creating diagonal decorative elements (à la Stripe). With the help of calc and some trigonometry, it can also be used on elements without distorting the text! This technique is explored in depth in Nils Binder’s awesome blog post, “Create Diagonal Layouts Like It’s 2020”.

Every element has an origin, the anchor that the transform functions execute from.

Check out how rotation changes when we tweak the transform origin:

The transform origin acts as a pivot point!

It isn’t exclusive to rotation, either; here’s how it affects scale:

This is useful for certain kinds of effects (for example, an element «growing out of» another one).

We can string together multiple transform functions by space-separating them:

The order is important: the transform functions will be applied sequentially. Check out what happens if we reverse the order:

The transform functions are applied from right to left, like composition in functional programming.

In the first demo, we rotate the element in its natural position, and then translate it along the X axis.

In this second demo, however, we translate the element first. When we apply the rotation, it rotates around its origin, which hasn’t changed.

Here’s the same demo, but with the origin shown:

We can use this to our advantage:

Источник

scale()

The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a data type.

Try it

This scaling transformation is characterized by a two-dimensional vector. Its coordinates define how much scaling is done in each direction. If both coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation).

When a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. A negative value results in a point reflection in that dimension. The value 1 has no effect.

Note: The scale() function only scales in 2D. To scale in 3D, use scale3d() instead.

Syntax

The scale() function is specified with either one or two values, which represent the amount of scaling to be applied in each direction.

Values

Cartesian coordinates on ℝ^2	Homogeneous coordinates on ℝℙ^2	Cartesian coordinates on ℝ^3	Homogeneous coordinates on ℝℙ^3
( sx 0 0 sy )	( sx 0 0 0 sy 0 0 0 1 )	( sx 0 0 0 sy 0 0 0 1 )	( sx 0 0 0 0 sy 0 0 0 0 1 0 0 0 0 1 )
	[sx 0 0 sy 0 0]

Accessibility concerns

Scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine. If you need to include such animations on your website, you should provide a control to allow users to turn off animations, preferably site-wide.

Also, consider making use of the prefers-reduced-motion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences.

Источник

transform

CSS-свойство transform позволяет вам поворачивать, масштабировать, наклонять или сдвигать элемент. Оно модифицирует координатное пространство для CSS визуальной форматируемой модели.

Интерактивный пример

Если свойство имеет значение, отличное от none , будет создан контекст наложения. В этом случае, элемент будет действовать как содержащий блок для любых элементов position: fixed; или position: absolute; которые он содержит.

Предупреждение: Только трансформируемый элемент может быть transform . Т.е. все элементы, шаблоны которых регулируются блочной моделью CSS, кроме : неизменяемые инлайновые блоки, блоки таблица-колонка, и блоки таблица-колонка-группа (en-US) .

Синтаксис

/* Значения ключевым словом*/ transform: none; /* Значения функций */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translateX(2em); transform: translateY(3in); transform: translateZ(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scaleX(2); transform: scaleY(0.5); transform: scaleZ(0.3); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); /* Мультифункциональные значения */ transform: translateX(10px) rotate(10deg) translateY(5px); transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg); /* Глобальные значения */ transform: inherit; transform: initial; transform: unset; 

Свойство transform может быть указано как значение ключевого слова none или как одно или более значений .

Значения

Одна или более применяемых функций CSS-трансформации. Функции трансформации умножаются в порядке слева направо, что означает, что составное трансформирование эффективнее применять в порядке справа налево.

Указывает, что трансформация не должна применяться.

Формальный синтаксис

Если perspective() (en-US) является одним из мультифункциональных значений, оно должно быть указано первым.

Источник