CSS

【transform:scale】How to Scale Tag Elements in 2D (x,y) or 3D (x,y,z)

 

This article introduces how to use CSS transform: scale to scale tag elements in 2D (x, y) or 3D (x, y, z). In the past, we introduced an article titled “Using jQuery’s .css and zoom to Scale the Entire Page”, but the zoom property did not work in certain browsers (especially Firefox).
This time, as an alternative, we’ll explore how to flexibly scale tag elements using transform: scale.

Contents
  1. What is CSS transform?
  2. Examples: Scaling in 2D and 3D
  3. HTML Example of Tag Elements
  4. Browser Compatibility
  5. Demo Page: Scaling Tag Elements with transform: scale
  6. Advanced Usage: Combining with Animation and Interaction
  7. Summary

What is CSS transform?

CSS transform is a property used to transform elements visually. It can rotate, move, scale, and perform various other transformations on elements. Specifically, scale is used to scale elements in 2D or 3D space. In 2D space, scale(x, y) allows individual adjustment of the element’s width and height, while in 3D space, scale3d(x, y, z) can be used to adjust depth as well.

Basic Usage of transform: scale

The basic syntax of transform: scale is as follows:

selector {
  transform: scale(scale-factor);
}

The scale factor is based on 1. A value greater than 1 enlarges the element, while a value smaller than 1 shrinks it. For example, transform: scale(2) enlarges the element by 2 times, and transform: scale(0.5) shrinks it by half. You can also use scaleX() and scaleY() to apply transformations only horizontally or vertically.

Examples: Scaling in 2D and 3D

Here are some examples of using transform: scale to scale image elements in 2D and 3D space. Below is the CSS code: 

<style>
body {
  font-family: 'Yu Mincho', 'Hiragino Mincho Pro', serif;
  padding: 0;
  margin: 0;
  font-size: 24px;
  text-align: center;
}
h1 {
  line-height: 1.6em;
  text-align: center;
  font-weight: normal;
  padding: 10px 0 0 0;
  font-size: 24px;
}
div {
  padding: 40px 0;
  border-top: dotted 1px #cccccc;
}
.demo1 img {
  transform: scale(0.6, 0.6);
}
.demo2 img {
  transform: scaleX(0.6);
}
.demo3 img {
  transform: scaleY(0.6);
}
.demo4 img {
  transform: scaleZ(0.6);
}
.demo5 img {
  transform: scale3d(0.6, 0.6, 0.6);
}
</style>

These classes apply different scaling methods to image elements. scale() scales the entire element evenly, scaleX() and scaleY() apply scaling only horizontally or vertically, respectively. scaleZ() adjusts the depth in 3D space, although it may not significantly affect 2D displays. scale3d() scales the entire element in 3D space.

HTML Example of Tag Elements

Here’s an HTML example that uses these classes to scale a 300px x 300px image element: 

<h1>Scaling img Tags in 2D (x, y) or 3D (x, y, z)</h1>

<div class="demo1">
scale(0.6, 0.6)<br>
<img src="simg.jpg">
</div>

<div class="demo2">
scaleX(0.6)<br>
<img src="simg.jpg">
</div>

<div class="demo3">
scaleY(0.6)<br>
<img src="simg.jpg">
</div>

<div class="demo4">
scaleZ(0.6)<br>
<img src="simg.jpg">
</div>

<div class="demo5">
scale3d(0.6, 0.6, 0.6)<br>
<img src="simg.jpg">
</div>

Each div element is assigned a class, and the scaling effects defined in CSS are applied to the images. The visual differences between scale(), scaleX(), scaleY(), scaleZ(), and scale3d() can be observed. Be sure to experiment and see the results.

Browser Compatibility

transform: scale is supported by most modern browsers. For example, it works on the latest versions of Firefox, Chrome, and Edge (as of July 2021). However, not all browsers have been tested, so it is recommended to verify the behavior on the browsers you need.

Additionally, when scaling images, note that increasing their size may make them appear pixelated if their resolution is insufficient. It is best to use this property for shrinking or visual effects.

Demo Page: Scaling Tag Elements with transform: scale

Check out the demo page below to see how it looks:

Demo Page for Scaling Tag Elements with transform: scale

Advanced Usage: Combining with Animation and Interaction

transform: scale can be used not only for simple scaling but also for animations and interactive effects. For example, by combining it with transition, you can set an animation to gradually enlarge an element when the user hovers over it. 

.demo6 img {
  transition: transform 0.3s ease-in-out;
}

.demo6 img:hover {
  transform: scale(1.2);
}

This code smoothly enlarges the image to 1.2 times its original size when hovered over. Such visual effects are excellent tools for enhancing user experience.

Summary

Using transform: scale, you can easily scale elements with just CSS, making it a useful tool for improving visual design and UI/UX. With good browser compatibility, it is widely used in modern websites. Combining it with animations and interactions provides an even more engaging experience for users.

Try using transform: scale in your projects based on the examples in this article.

※ Please use this information responsibly.

Do not copy the Google Analytics tags from the demo page’s head tag.

scale transform
RELATED POST