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