zoom

Свойство zoom изменяет масштаб элемента. Если меньше 1 или 100%, то элемент уменьшится. А если больше 1 или 100%, то элемент увеличится.

        
          
          <p class="small-text">При наведении текст уменьшается на 50%<p><p class="normal-text">Сохраняется исходный размер текста<p><p class="big-text">При наведении текст увеличивается в 2 раза<p>
          <p class="small-text">При наведении текст уменьшается на 50%<p>
<p class="normal-text">Сохраняется исходный размер текста<p>
<p class="big-text">При наведении текст увеличивается в 2 раза<p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .small-text:hover {  zoom: 50%;}.normal-text:hover {  zoom: normal;}.big-text:hover {  zoom: 2;}
          .small-text:hover {
  zoom: 50%;
}

.normal-text:hover {
  zoom: normal;
}

.big-text:hover {
  zoom: 2;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

У zoom есть четыре значения:

• normal — задаёт элементу исходный масштаб. Значение по умолчанию.
• число — коэффициент масштабирования. 1.0 эквивалентно значению normal.
• процент — процентное значение. 100% эквивалентно значению normal.
• reset — не изменяет масштаб элемента, если пользователь применяет к документу масштабирование без сведения (разведения) пальцев, т. е. масштабирование, применимое к сенсорным интерфейсам. Это нестандартное значение, перед его использованием следует проверить поддержку на Can I use.

💡 Значение свойства не наследуется.

💡 Применимо ко всем элементам.

💡 Свойство можно анимировать.