Как избежать изменения размера других объектов при вращении объекта? ⇐ CSS

[Anonymous]

Это странная маленькая ошибка, которая выглядит немного странно. Я не понимаю, почему другие элементы меняют размер, когда анимация наведения вращает элемент.
Я пробовал не использовать вращение, но только масштабирование элемента, похоже, приводит к изменению размера других элементов. то же самое происходит, когда я только вращаю, а не масштабирую элемент.
Мне кажется, что масштабирование и вращение элемента заставляют другие элементы растягиваться и изменять размер. я все еще хочу анимировать элементы при наведении на них курсора, но как мне остановить странное изменение размера?

Код: Выделить всё

.float {
background-color: #b6c4a4;
border-radius: 20px;
color: #73846a;
text-decoration: none;
/* margin: 15px; */
margin: 0.75%;
padding: 20px;
transition: 0.5s;
flex-basis: 30%;
}

.float:hover {
background-color: #cdddbd;
transform: translateY(-20px);
rotate: -1 -1 -1 5deg;
margin-top: 25px;
scale: 1.02;
font-size: 20px;
}

.cards {
margin-top: 15px;
display: flex;
flex-wrap: wrap;
}

.card {
flex-basis: 30%;
}

Код: Выделить всё

[url=https://github.com]
EXAMPLE 1a
example paragraph. blah blah blah.
[/url]
[url=https://github.com]
EXAMPLE 2a
example paragraph. blah blah blah.
[/url]
[url=https://github.com]
EXAMPLE 3a
example paragraph. blah blah blah.
[/url]
[url=https://github.com]
EXAMPLE 1b
example paragraph. blah blah blah.
[/url]
[url=https://github.com]
EXAMPLE 2b
example paragraph. blah blah blah.
[/url]
[url=https://github.com]
EXAMPLE 3b
example paragraph. blah blah blah.
[/url]

Подробнее здесь: https://stackoverflow.com/questions/792 ... ct-rotates