Scaling the X and Y dimensions togetherSection

by jonahe

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale -->

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

CSS

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

.scaled {
  tranform-origin: " left";
  transform: scale(2, 1.2); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}