С этой записью я хотел бы открыть новый раздел в моем блоге, который будет содержать различные кусочки кода, которые могут оказаться полезными при создании и оформлений сайта. Категория получит название «Сниппеты». В будущем планирую разбить рубрику на подкатегорий для различных платформ и языков.
Начнем с CSS3.
Благодаря новым возможностями появившимся в третьей версий CSS, можно легко повернуть любой объект, будь это текст, картинка или целый блок с смешанным содержанием, используя для этого всего одно свойство.
Это свойство называется transform. Рассмотрим его использование на небольшом примере с разным контентом.
Для этого поместим текст в контейнер и присвоим ему класс rotate:
Пример с текстом:
Стиль CSS:
Другие примеры:
Фотография:
Небольшая форма:
Добавки -moz, -webkit, -ms перед свойством transform необходимы для обеспечения кроссбраузерности. -moz отвечает за корректное отображение в Mozilla Firefox, -ms для Internet Explorer, а -webkit в Google Chrome, Safari и других браузерах работающих на движке Webkit.