The Awesome CSS Transform Property and the Scale Function

The Awesome CSS Transform Property and Scale Function

This tutorial is a CSS reference on the transform property and the scale function. These examples demonstrate how to use the scale function.

From grid layouts, carousels, and down to colors, CSS defines the aesthetics of your website. It shapes the look and feels, acting as a car chassis’s body kit. In short, it determines your site’s user experience. So, learning this language is essential to exceeding the threshold of mediocrity in the web development field.

Once you dive in and dig deep into the CSS language, you’ll understand its capabilities go beyond just adding layouts, fonts, and colors to web structure. Interestingly, one of such unique properties of CSS is that it includes dynamic transformation properties. Those dynamic properties allow you to change the shapes and the positions of elements on a web page.

Though the goal of publishing this article is to shed more light on the transform: scale property, we’d like to, first, share with you what the CSS transform property is all about.

An Overview

The CSS transform property lets you visually manipulate elements by scaling, skewing, rotating, or translating.

The default valueNone 
Inherited No
AnimatableYes
VersionCSS3
JavaScript syntaxobject.style.transform=”scale(1.5)”

Scale CSS Styles

.element {
  width: 50px;
  height: 50px;
  transform: scale(10);
}

This example shows that the element highlighted above will now be scaled to ten times its original size, even with a defined height and width. However, in the example below, the element will be greatly the width but twice the height of the original element.

.element {
  transform: scale(3, 2);
}

Syntax

transform: none|transform-functions|initial|inherit;

Property Values

ValueDescription
NoneThe none value means there should be no transformation.
matrix(n,n,n,n,n,n)The matrix value is a function that defines a 2D transformation, and it uses a matrix of six values.
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
The matrix3d value is a function that defines a 3D transformation of an element using a 4×4 matrix of 16 different values.
translate(x,y)The translate value is a function that defines a 2D translation.
translate3d(x,y,z)The translate3d value is a function that defines a 3D translation.
translateX(x)The translateX value is a function that defines an element’s translation, and it uses the value for the X-axis.
translateY(y)The translateY value is a function that defines a translation of an element, and it uses only the value for the Y-axis.
translateZ(z)The translateX value is a function that defines a 3D translation of an element but only uses the value for the Z-axis.
scale(x,y)The scale value is a function that defines a 2D scale transformation.
scale3d(x,y,z)The scale3d value is a function that defines a 3D scale transformation.
scaleX(x)The scaleX value is a function that defines a scale transformation whose values are for the X-axis.
scaleY(y)The scaleY value is a function that defines a scale transformation whose values are for the Y-axis.
scaleZ(z)The scaleX value is a function that defines a 3D scale transformation by giving a value for the Z-axis.
rotate(angle)The rotate value is a function that defines a 2D rotation. The angle is stated in the parameter.
rotate3d(x,y,z,angle)The rotate3d value is a function that defines a 3D rotation.
rotateX(angle)The rotateX value is a function that defines a 3D rotation along the element’s X-axis.
rotateY(angle)The rotateY value is a function that defines a 3D rotation along the element’s Y-axis.
rotateZ(angle)The rotateX value is a function that defines a 3D rotation along the Y-axis.
skew(x-angle, y-angle)The skew value is a function that defines a 2D skew transformation along the X-axis and Y-axis.
skewX(angle)The skewX value is a function that defines a 2D skew transformation along the X-axis.
skewY(angle)The skewY value is a function that defines a 2D skew transformation along the Y-axis.
perspective(n)The perspective value is a function that defines a perspective view for a 3D transformation.
initialThe initial value sets the property to its default value.
inheritThe inherit value inherits the property from its parent element.

What is the transform scaleX value?

scaleX()

The scaleX function defines a transformation that changes the size of an HTML element along the X-axis. The scaleX() function modifies the abscissa of each element point. It does this by a constant factor, though that’s not the case if the scale factor equals 1. Unlike some of the other CSS functions highlighted below, this one isn’t isotropic, and the angles are also not conserved. But note that scaleX (-1) defines an axial symmetry.

The CSS transform scaleX is expressed as transform: scaleX(number); with the number being replaced with an actual number like scaleX(0.2).

Below, we show an example where we use scaleX to scale an element on the x-axis.

HTML

<div>
  <p>Normal Element</p>
</div>
<div class="scaled">
  <p>Scaled Element</p>
</div>

CSS

body {
  background: gray;
  color: white;
}

div {
  width: 120px;
  height: 120px;
  background-color: black;
  display: inline-block;
}

.scaled {
  transform: scaleX(0.6);
  background-color: red;
}

p  {
  font-family: cambria;
}
What is the transform scaleX function
What is the transform scaleX function

Click on me to edit the code on codepen.io.

What is the transform scaleY value?

scaleY()

The scaleY function helps define a transformation that resizes an HTML element along the y-axis. In the real sense, it alters the lines of each HTML element by a fixed factor. But the exception, however, is when the scale factor is 1. The function is the identity transform. Note that the scaling isn’t isotropic, and the angles of each HTML element aren’t conserved. The syntax for this is scaleY(s).

The CSS transform scaleY is expressed as transform: scaleY(number); with the number being replaced with an actual number like scaleY(1.9).

Below, we show an example where we use scaleY to scale an element on the y-axis.

HTML

<div>
  <p>Normal</p>
</div>
<div class="scaled">
  <p>Scaled HTML Element</p>
</div>

CSS

body {
  background: gray;
}

div {
  width: 80px;
  height: 80px;
  background-color: red;
  color: white;
}

.scaled {
  transform: scaleY(0.6);
  background-color: blue;
  padding-bottom: 40px;
}

p{
  padding-top: 30px;
  margin-left: 10px;
}
What is the transform scaleY function
What is the transform scaleY function

Click on me to edit the code on codepen.io.

What is the transform scaleZ value?

scaleZ()

The scaleZ function defines a transformation that resizes any element on the Z-axis. It modifies the z-coordinate of each HTML element point by a fixed factor. But the exception is when the scale factor is 1; in this case, the function is the identity transform. But here’s the catch – the scale isn’t isotropic. Also, the angles of each element aren’t conserved. But note, scaleZ(sz) is same as scale3d(1, 1, sz).

The CSS transform scaleZ is expressed as transform: scaleZ(number); with the number being replaced with an actual number like scaleZ(0.75).

Below, we show an example where we use scaleZ to scale an element on the z-axis.

HTML

<div>
  <p>Normal</p>
</div>
<div class="perspective">
  <p>Translated Element</p>
</div>
<div class="scaled-translated">
  <p>Scaled Element</p>
</div>

CSS

div {
  width: 120px;
  height: 120px;
  background-color: blue;
  border: 1px solid black; 
  display: inline-block;
  margin-left: 70px;
}

.perspective {
  /* The line includes a perspective to create a 3D space effect*/
  transform: perspective(200px) translateZ(-150px);
  background-color: black;
}

.scaled-translated {
  /* The code includes a perspective to create a 3D space effec*/
  transform: perspective(300px) scaleZ(3) translateZ(-150px);
  background-color: red;
}

p {
  color: white;
  border-radius: 50%;
  text-align: center;
  padding-top: 50px; 
  margin: auto;
}
What is the transform scaleZ function
What is the transform scaleZ function

Click on me to edit the code on codepen.io.

What is the transform scale3d value?

scale3d()

The scale3d function defines a transformation that resizes an HTML element in 3D space (just as the name suggests). Thanks to the amount of scaling defined by a vector, it can be resized into different dimensions at different scales. Hence, this CSS function’s result is a <transform-function> datatype.

The CSS transform scale3d is expressed as: transform: scale3d(number, number, number); with the numbers being replaced with actual numbers like scale3d(0.2, 2, 0.5).

Below, we show an example where we use scale3d to scale an element on the x-axis, y-axis, and z-axis.

HTML

<div>
  <p>Unaltered Div</p>
</div>
<div class="scaled">
  <p>A Scaled Div</p>
</div>

CSS

body {
  background: gray;
  color: white;
}

div {
  width: 120px;
  height: 120px;
  background-color: red;
  font-family: Cambria;
  display: inline-block;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  transform-origin: left;
  background-color: black;
}
What is the transform scale3d function
What is the transform scale3d function

Click on me to edit the code on codepen.io.

Conclusion

The previous scale tutorial only highlighted the CSS scale property and its values and functionalities. Keep in mind that the scale property is not the same as the transform property. This tutorial highlights the functions and values of the transform scale property. Don’t forget; you can always tweak the codes provided in this article. Let’s see what you come up with at the end.

Recommended Articles

Comments

Tip: Thoughtful and well written comments are voted up more often.
0 Comments

No Comments.