Zoom Vs. Масштаб в CSS3

Я искал некоторые свойства CSS, которые я никогда не использовал, и узнал о свойстве zoom css3

  • В чем сходство и различие между ними?

  • Когда использовать Zoom, а когда масштабировать? Оба выполняют почти одинаковую работу.

  • Что эффективнее использовать и почему?

Что я заметил?

  • оба масштабируют объект, но по умолчанию transform-origin для масштабирования его центра и для увеличения его верхнего левого угла, я думаю;

  • когда мы используем их для масштабирования при наведении, масштаб будет масштабироваться и снова сжимается до исходного размера, в то время как масштаб будет уменьшаться только при наведении. - >> jsfiddle, показывающий эффект при наведении**

*
{
    -webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

box, box2
{
    display: inline-block;
    width: 100px;
    height: 100px;
    
    margin: 20px;
}

box
{
    background: #b00;
}

box:hover
{
    zoom: 1.1;
}

box2
{
    background: #00b;
}

box2:hover
{
    -webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}
<box></box>
<box2></box2>

Ответы

Ответ 1

Преобразование более предсказуемо, чем масштабирование в разных браузерах.

Увеличение влияет на позиционирование по-разному в разных браузерах.

пример: position:absolute; left:50px; zoom: 50%; position:absolute; left:50px; zoom: 50%;

  • IE не будет изменять left значение вообще.
  • Chrome изменит левое значение на 25px. Эффективно это делает left = left * zoom. Но вычисленные значения DevTools в DevTools по-прежнему будут отображаться left: 50px, хотя это фактически неверно из-за увеличения.

Transform обрабатывается одинаково во всех браузерах (насколько я могу судить).

пример: position:absolute; left:50px; transform: scale(0.5) position:absolute; left:50px; transform: scale(0.5)

  • left будет эффективно установлен на 25 25px в Chrome и IE. (опять же, вычисленные значения по-прежнему не будут отражать это, они будут отображаться left:50px)
  • Чтобы избежать изменения left значения, просто используйте transform-origin: 0 0. Это гарантирует, что осталось еще 50px.

Демонстрация: http://jsfiddle.net/4z728fmk/ показывает 2 поля, где маленький масштабируется или масштабируется до 50%. Выглядит так:

comparison of zoom and transform in different browsers

edit: img обновлено 2016-06-16 с помощью Firefox (ничего не изменилось в Chrome или IE с прошлого раза)

Ответ 2

В дополнение к ответу Drkawashima:

  • zoom вообще не работает в Firefox. См. caniuse
  • Когда-то (сказка заканчивается здесь извините), zoom: 1; было мощным выражением, которое помогло отладить IE6. Он присвоил элемент, на который был применен внутренний "переключатель" в этот браузер с именем hasLayout (а не свойство CSS, такая концепция, как "clearfix" ). Вы найдете position: relative; zoom: 1; довольно много в старых проектах