#div1{
    height: 150px;
    width: 150px;
    background-color: rgb(0, 102, 255);
    margin: 50px;
    margin-top: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 25px;
    font-weight: bold;
    transition-duration: 0.5s;
}
h1{
    color: red;
    font-weight: bold;
}

.div1:hover{
    transform: translate(30px,30px);
}

.div2:hover{
    transform: rotate(45deg);
}

.div3:hover{
    transform: scale(1.2);
}

.div4:hover{
    transform: skew(30deg);
}
#main{
    display: flex;
    justify-content:center;
}