С этой записью я хотел бы открыть новый раздел в моем блоге, который будет содержать различные кусочки кода, которые могут оказаться полезными при создании и оформлений сайта. Категория получит название «Сниппеты». В будущем планирую разбить рубрику на подкатегорий для различных платформ и языков.
Начнем с CSS3.
Благодаря новым возможностями появившимся в третьей версий CSS, можно легко повернуть любой объект, будь это текст, картинка или целый блок с смешанным содержанием, используя для этого всего одно свойство.
Это свойство называется transform. Рассмотрим его использование на небольшом примере с разным контентом.
Для этого поместим текст в контейнер и присвоим ему класс rotate:
Пример с текстом:
<div class="rotate">Повернутый текст</div>Стиль CSS:
.rotate {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
}Другие примеры:
Фотография:
<img src="http://placeimg.com/200/200/tech" class="rotate" />Небольшая форма:
<div class="rotate">
<input type="text" size="20" placeholder="Логин" /><br />
<input type="password" size="20" placeholder="Пароль" /><br />
<input type="submit" size="10" />
</div>Добавки -moz, -webkit, -ms перед свойством transform необходимы для обеспечения кроссбраузерности. -moz отвечает за корректное отображение в Mozilla Firefox, -ms для Internet Explorer, а -webkit в Google Chrome, Safari и других браузерах работающих на движке Webkit.