transform

 .box{
            display: flex;
            align-items: center;
            justify-content: center;
            background: brown;
            border: 2px solid black;
            border-radius: 8px;
            height: 400px;
            width: 400px;
            transition: all 0.5s ease-in-out;
        } 
        .box:hover{
            /* transform: rotate(360deg); */
            /* transform: skew(40deg); */
            /* transform: scale(2); */
            /* transform: translateX(123px); */
            /* transform: translateY(123px); */
            transform: translate(123px, 123px);

        }

this is how we perform a transform property

remember that transform without transition will not give us a animation effect it will simpely perform the task.