Transforms and Transitions

<div class="body">
  <div class="flex-container">
    <div class="square-1"></div>
    <div class="square-2"></div>
    <div class="square-3"></div>
  </div>
  <div class="label-container">
    <p>Square 1</p>
    <p>Square 2</p>
    <p>Square 3</p>
  </div>
</div>

.body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.flex-container {
  display: flex;
  gap: 50px;
}

.label-container {
  display: flex;
  gap: 50px;
  margin-top: 20px;
}

.square-1, .square-2, .square-3 {
  background-color: purple;
  height: 50px;
  width: 50px;
}

.square-1 {
  /* Write code below */
}

.square-2 {
  /* Write code below */
}

.square-3 {
  /* Write code below */
}

.body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.flex-container {
  display: flex;
  gap: 50px;
}

.label-container {
  display: flex;
  gap: 50px;
  margin-top: 20px;
}

.square-1, .square-2, .square-3 {
  background-color: purple;
  height: 50px;
  width: 50px;
}

.square-1 {
  /* Write code below */
  transform: scale(1.5);
}

.square-2 {
  /* Write code below */
  transform: scaleX(2);
}

.square-3 {
  /* Write code below */
  transform: scale(25%);
}