Увеличение кругов на CSS3

Почему при добавлении к .circle свойства scale он перестает выравниваться по центру?
.furniture-item { position: absolute; width: 100px; height: 100px; top: 50%; left: 50%; transform: scale(4); transform-origin: 50%; background-color: rgba(110, 100, 204, 0.5); border-radius: 50%; cursor: pointer; z-index: 1; transition: transform 1s; } .circle { position: absolute; opacity: 1; width: 25px; height: 25px; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 50%; border-radius: 50%; background-color: rgba(0, 100, 204, 0.5); z-index: 1; }

Пример

Ответ

Трансформации применяются последовательно - масштабирование нужно применять после сдвига.
transform: translate(-50%, -50%) scale(2);
.furniture-item { position: absolute; width: 100px; height: 100px; top: 50%; left: 50%; transform: scale(4); transform-origin: 50%; background-color: rgba(110, 100, 204, 0.5); border-radius: 50%; cursor: pointer; z-index: 1; transition: transform 1s; } .circle { position: absolute; opacity: 1; width: 25px; height: 25px; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 50%; border-radius: 50%; background-color: rgba(0, 100, 204, 0.5); z-index: 1; }