У меня есть следующий HTML код:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = "container-fluid">
<div class = "container">
<img class = "image img-fluid" src = "advertisement.png">
<img class = "image img-fluid reset" src = "blue.png">
<img class = "image img-fluid reset" src = "green.png">
<img class = "image img-fluid reset" src = "brown.png">
<img class = "image img-fluid reset" src = "red.png">
</div>
</div>
</body>
</html>
Где стиль. css:
.container {
position: relative;
}
.image {
position: absolute;
width: 840px;
height: 600px;
}
.reset{
transform: rotate(180deg);
transform-origin: center;
}
Перед добавлением класса сброса к каждому из синего, зеленого , коричневые и красные изображения, у меня есть что-то вроде этого: 
Обратите внимание, что отдельные изображения m & ms являются только размером самих m & m, то есть они не огромны с невидимый фон.
Теперь моя проблема в том, что, когда я пытаюсь добавить вращение на 180 градусов, а не вращение вокруг их центра, m & ms делают что-то вроде этого: 
Почему это так и как я могу это исправить?