<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.