Чтобы сделать transform: scale()
одинаковым для двух блоков, вам понадобится задать им одинаковые значения для свойства transform-origin
.
1. Создайте два блока в HTML:
<div class="block"></div> <div class="block"></div>
2. Добавьте стили для блоков в CSS:
.block { width: 100px; height: 100px; background-color: #00ff00; margin-bottom: 20px; transform-origin: center center; /* задаем одинаковую точку привязки */ }
3. Примените transform: scale()
к обоим блокам:
.block { /* ... */ transform: scale(1.5); /* задаем одинаковый коэффициент масштабирования */ }
Теперь оба блока будут масштабироваться с одинаковым коэффициентом и вокруг одной и той же точки привязки.