feture

Use CSS variable (Transition and Transform)

 This is CSS sheet(transform)

/* transition variable */

.mainn12{

    background-color: yellowgreen;

    width: 200px;

    height: 200px;

    margin: 0 auto;

     transition-property: width,height,transform;

    transition-duration: 0.5s,1s;

    transition-timing-function: ease-in-out;

    /* transition: width 1s,height 2s; */

}

.mainn12:hover{

    width: 300px;

    height: 400px;

    transform: rotate(360deg);

}

.mainn12 h1{

    text-align: center;

}

This is HTML sheet

  <div class="mainn12"><br>

                <h1>Sardar IT</h1>

               </div>