Усукване, усукване, смяна

В допълнение към мащабирането има още три трансформации, които могат да се използват за завъртане, завъртане и преместване на елементи (изместването се извършва по координатите x, y). Нека добавим всяка трансформация към получената фотогалерия, за да разберем бързо как работят.

Добавете ротация

Да приемем, че трябва да завъртим снимка, когато задържите курсора на мишката върху нея, като същевременно я мащабирате, както преди. Можем да добавим ротационна трансформация към правилото: hover:

-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);

Все още увеличаваме снимката в състояние на задържане, но също така я завъртаме с 10 градуса вляво с трансформация на завъртане (Фигура 4.05). Работи в Safari, Chrome, Firefox и Opera. Отрицателните стойности от –1 градуса до –360 градуса завъртат елемента обратно на часовниковата стрелка; положителни стойности от 1 градуса до 360 градуса - по посока на часовниковата стрелка.

Фигура: 4.05. Снимка в състояние на задържане, увеличена и завъртена наляво с помощта на завъртане на трансформация

Освен това можете да завъртите снимките по различни начини (придавайки на всяка снимка собствен ъгъл на въртене), така че всяка да изглежда така, сякаш е хвърлена на масата, без да гледа. След това може да се завърти и мащабира по същия начин в състоянието: hover.

10px rgba

Г. Сидехолм. "CSS3 за уеб дизайнери"

Фигура: 4.06. Завъртане може да се използва за изобразяване на снимки, разпръснати по страницата.