Сгладим масштабирование переходом

Сгладим масштабирование переходом

Напоследок, добавив переход на фотографию, мы сгладим масштабирование, навесив на состояние :hover анимированное увеличение и уменьшение фотографии. Такой эффект раньше можно было воспроизвести только на основе Flash или JavaScript; теперь он достигается несколькими строчками кода на CSS3.

Вот код, задающий переход; он добавлен к полному CSS-коду этой небольшой фотогалереи:

ul.gallery li {

float: left;

margin: 0 10px;

padding: 10px;

border: 1px solid #ddd;

list-style: none;

}

ul.gallery li a img {

float: left;

width: 200px;

-webkit-transition: – webkit-transform 0.2s ease-in-out;

-moz-transition: – moz-transform 0.2s ease-in-out;

transition: transform 0.2s ease-in-out;

}

ul.gallery li a: hover img {

-webkit-transform: scale(1.5);

-moz-transform: scale(1.5);

-o-transform: scale(1.5);

transform: scale(1.5);

-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);

box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);

}

Обратим внимание, что на этот раз мы применяем переход к преобразованию scale, поэтому подходящие браузерные префиксы записываются для обоих свойств – transition и transform.