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

#html #css #css3 #svg

Почему при добавлении к .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;
}



  






Пример
    

Ответы

Ответ 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;
}



  




Ответ 2

Вы смещаете точку отсчета к центру фигуры за счет transform: translate(-50%, -50%);.
Параметры здесь нужно корректировать исходя из значения scale:


При scale(1) - -50%
При scale(2) - -25%
При scale(4) - -12.5%
При scale(N) - -50% / N (формула в общем виде)


Стабильнее будет работать отрицательный margin, заданный в половину ширины и высоты
блока (в пикселях):



.furniture-item {
  background-color: rgba(110, 100, 204, 0.5);
  border-radius: 50%;
  height: 100px;
  left: 50%;
  margin: -50px;
  position: absolute;
  top: 50%;
  transform: scale(4);
  width: 100px;
}

.circle {
  background-color: rgba(0, 100, 204, 0.5);
  border-radius: 50%;
  height: 25px;
  left: 50%;
  margin: -12.5px;
  position: absolute;
  top: 50%;
  transform: scale(2);
  width: 25px;
}

  






Пример на jsfiddle.


Ответ 3

Возвращать надо на 50% от старого размера, т.е. на 25% от увеличенного:



.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: scale(2) translate(-25%, -25%);
  transform-origin: 50%;
  border-radius: 50%;
  background-color: rgba(0, 100, 204, 0.5);
  z-index: 1;
}

  




Ответ 4

Решение SVG

При применении команды scale(n) в SVG происходит всё тоже самое, как и в CSS - чем
больше увеличение, тем больше объект сдвигается от начального положения.     

     


Как известно начало координат у svg находится в левом, верхнем углу.
При cx="40" cy="40" центр окружности будет расположен правее на 40px и ниже на 40px
от левого угла (0,0) вьюпорта svg. При применении scale(2) эти цифры умножаются на
два. Только из-за этого круг сместится правее и ниже.
 Новые координаты центра окружности будут cx="80" и cy="80".
 Для наглядности смотрите анимацию процесса.
 Здесь к розовому кругу последовательно применяется увеличение в 1-2-4 раза и обратно
4-2-1    




  
  
   
 
 
 
 




Вариант 1:

Как с этим бороться,- есть несколько вариантов:
Допустим необходимо увеличить объект максимум в 4 раза.
Считаем координаты центра: 40*4= 160px; 
И сразу располагаем центр окружности с этими координатами: cx="160" cx="160" Теперь
у нас есть уверенность, что круг не выйдет при увеличении за пределы канвы SVG.  см.
пример ниже.    




  
  
   
 
 
 
 




Следующий пример немного посложнее, с двумя кругами, попутно можно посмотреть, как
взаимодействуют между собой две анимации.    




  
  
   
 
 
 
 




Вариант 2
Если вам нужно разместить окружность в углу канвы, но вы не хотите, чтобы она при
увеличении уходила за границы канвы или убегала к центру по диагонали, делайте координаты
центра окружности равными радиусу окружности.    

        





  
  
   
 
 
 
 




Есть еще несколько способов для удержания, центрирования объекта при масштабировании.
В ответах других участников уже всё хорошо объяснено. Спасибо за это всем участвующим.