Я искал некоторые свойства 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>
