body {
    background-color: #333;
}

.box {
    background-color: white;
    width: 300px;
    height: 300px;
    position: relative;
    margin: auto;
    top: 200px;
    /* transition-property: background-color, border-radius, transform; */
    transition-property: all;
    transition-duration: 1s;
    border: 10px green solid;

    /* Ease in = start slow, end fast */
    /* Ease out = start fast, end slow */
    /* transition-timing-function: ease-out; */
}

/* Identifiable halfway point, border spacing, hover, active */
.box:hover{
    background-color: red;
    border-radius: 50%;
    /* transform: rotateY(180deg); */
    /* transform: translate(25%, 50%); */
    /* transform: translateX(-25%); */
    /* transform: translateY(-55%); */
    /* transform: skew(30deg, 50deg); */
    /* transform: scaleX(1.5); */
    /* transform: scaleY(1.5); */
    transform: scale(1.5, 0.5);
    border-color: pink;
}