<h3 align=center>Hover over the box to see it transform using individual transform properties!</h3>
<div class="robot-wrapper">
  <div class="optimus-prime">
    <h2>🤖 Robots In Disguise</h2>
  </div>
</div>

.robot-wrapper {
  display: flex;
  justify-content: center;
  margin-block-start: 5em;
  inline-size: 100%;
}
.optimus-prime {
  inline-size: 250px;
  padding: 2em;
  border-size: 3px;
  border-style: solid;
  background-color: orange;
  border-color: blue;
  transform: rotate(-5deg) translateX(10%) scale(1.2);
  transition: auto 0.3s;
}
.optimus-prime:hover {
  rotate: 5deg;
  translate: 10% 0;
  scale: 1.5;
}