* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background: lightskyblue;
}

#circle {
  width: 100px;
  height: 100px;
  background: rgb(4, 47, 133);
  border-radius: 50%;
  transition: all 0.4s ease-in;
}

#circle.change-me {
  background: rgb(152, 124, 224);
  transform: translateX(300px) translateY(200px) scale(2.4) rotate(33deg) skewX(2deg);
}

#circle.change-me:before {
  background: rgb(152, 124, 224);
}