JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<div id="d1">Hover and I will only scale</div>
<div id="d2">Hover and I will only translate</div>
<div id="d3">Hover and I will do both</div>

CSS

div {
    width: 100px;
    height: 100px;
    background: red;
    font-size: 13px;    
    display: inline-block;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;    
}
div#d1:hover {
    -webkit-transform: scale(0.5);
}
div#d2:hover {
    -webkit-transform: translate(100px, 100px);
}
div#d3:hover {
    -webkit-transform: scale(0.5) translate(100px, 100px);
}