div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
    border-radius: 25px;
}

#trans1 {
    background-color: red;
    transform: rotate(45deg);
}

#trans2 {
    background-color: greenyellow;
    transform: skewX(20deg);
}

#trans3 {
    background-color: blue;
    transform: scale(0.5, 0.5);
}

#transformations {
    display: flex;
    justify-content: space-around;
}

#transitions {
    display: flex;
    justify-content: space-around;
}

#trans4 {
    background-color: violet;
    transition: width 2s;
}

#trans4:hover {
    width: 300px;
}

#trans5 {
    background-color: orange;
    transition-timing-function: ease-in-out;
    transition-duration: 1s;
}

#trans5:hover {
    translate: 100px 20px;
}

#trans6 {
    background-color: yellow;
}

#trans6:hover {
    animation-name: myAnimation;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes myAnimation {
  0%  {background-color: yellow;}
  20%   {background-color: red;}
  40%  {background-color: blue;}
  60% {background-color: green;}
  80%  {background-color: purple;}
  100%  {background-color: yellow;}
}