<style>
body{
background-color: black;
}
.box {
width: 100px;
height: 100px;
background-color: rgb(103, 103, 244);
color: white;
text-align: center;
line-height: 100px;
margin: 20px;
}
.main1:hover {
transform: translateX(100px);
transition: 2s;
}
.main2:hover {
transform: rotate(360deg);
transition: 2s;
}
.main3:hover {
transform: rotateX(360deg);
transition: 2s;
}
.main4:hover {
transform: rotateY(360deg);
transition: 2s;
}
.main5:hover {
transform: scale(1.2);
transition: 2s;
}
.main6:hover {
transform: scaleX(1.5);
transition: 2s;
}
</style>
<body>
<div class="box main1">TranslateX</div>
<div class="box main2">Rotate</div>
<div class="box main3">RotateX</div>
<div class="box main4">RotateY</div>
<div class="box main5">Scale</div>
<div class="box main6">ScaleX</div>
</body>