<div class="transform-element">Hover to Transform</div>
<div class="transform-element-js">Hover to Transform</div>

div {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: 20px;
    transition: transform 1s ease;
}

.transform-element:hover {
    transform: rotate(45deg) scale(1.5) translateX(50px);
}

const box = document.querySelector('.transform-element-js');

box.addEventListener('mouseover', function() {
    this.style.transform = 'rotate(45deg) scale(1.5) translateX(50px)';
});
box.addEventListener('mouseout', function() {
    this.style.transform = null;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.