div{
    background: #555;
    height: 50%;
    width: 50%;
    border: 1px solid black;
    border-radius: 0;
    transition: background .3s, transform 1s, border-radius 2s;
    transform: rotateZ(405deg);
    justify-self: center;
    align-self: center;
}

.red{
    background: #fa8;
    border-radius: 100%;
    transform: rotateZ(0);
}
.blue{
    background: #8af;
    border-radius: 100%;
    transform: rotateZ(810deg);
}

section{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    height: 100%;
    gap: 20px;
}

body{
    background: black;
}