Page 97 - Сила CSS3 Освой новейший стандарт

Трансформирование аватаров • 97

Свойство transform без префикса пока что не поддерживается ни одним из брау-
зеров; мы добавим его для обеспечения совместимости в будущем.
Слово transform (и на этот раз я имею в виду все три эквивалента для разных
браузеров) сообщает браузеру, что вы желаете применить трансформацию. После
этого вы говорите, что в данный момент вас интересует функция трансформации
rotate, а угол поворота равен –5 градусам, на что указывает значение -5deg. Можно
использовать как положительные, так и отрицательные значения. Разные функции
трансформации принимают разные параметры (значение -5deg ни о чем не скажет
функции масштабирования, не так ли?) однако принцип записи функций всегда
одинаков:

transform: функция(параметры);
Для задания источника трансформации, т. е. точки, относительно которой транс-
формируется объект, можно использовать свойство transform-origin. Например,
можно указать в качестве источника трансформации центр объекта или его правый
верхний угол. По умолчанию трансформирование осуществляется относительно
неподвижного центра, что нас в данном случае вполне устраивает, поэтому мы не
будем добавлять свойство transform-origin.
Сохраните страницу и обновите ее в окне браузера. Вы увидите, что теперь аватары
отображаются под небольшим углом.

На момент написания этой главы
в Chrome существуют большие
проблемы со сглаживанием кон-
туров аватаров после поворота.
Края картинок получаются очень
зазубренными, и избежать этого
невозможно. Можно либо уда-
лить из объявления свойства
строку с префиксом -webkit- (при
этом в Safari картинки также по-
ворачиваться не будут), либо
смириться с неровностью линий.

Рис. 2.25. Функция трансформации rotate
поворачивает аватары пользователей

www.trk.kg