Учебник CSS
Невозможно отучить людей изучать самые ненужные предметы.
Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3
Надо знать обо всем понемножку, но все о немногом.
Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы
Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)
Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода
Самоучитель CSS
Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5
Новости
Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости
Справочник CSS
Справочник от А до Я
HTML, CSS, JavaScript
Афоризмы
Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы
| Помогли мы вам |
- 25 апреля 2024, 01:19
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |||
| 9.0+ | 10.0+ | 5.0+ | 10.5+ | 12.10+ | 3.1+ | 3.5+ | 16.0+ | 2.1+ | 2.0+ |
Краткая информация
| Значение по умолчанию | none |
|---|---|
| Наследуется | Нет |
| Применяется | К блочным и строчным элементам |
| Процентная запись | Неприменима |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-2d-transforms/#transform-property |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.
Синтаксис
transform: <функция> [<функция>]* | none
Значения
- функция
- Функция трансформации.
- none
- Отменяет действие трансформации.
Функции трансформации
matrix
Задаёт матрицу преобразований.
rotate
Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.
transform: rotate(<угол>)
scale
Масштаб элемента по горизонтали и вертикали.
transform: scale(sx[, sy]);
Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.
scaleX
Масштабирует элемент по горизонтали.
transform: scaleX(sx);
scaleY
Масштабирует элемент по вертикали.
transform: scaleY(sy);
skewX
Наклоняет элемент на заданный угол по вертикали.
transform: skewX(<угол>)
skewY
Наклоняет элемент на заданный угол по горизонтали.
transform: skewY(<угол>)
translate
Сдвигает элемент на заданное значение по горизонтали и вертикали.
transform: translate(tx[, ty])
translateX
Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.
transform: translateX(tx)
translateY
Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.
transform: translateY(ty)
Пример
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transform</title>
<style>
.turn:hover {
-moz-transform: rotate(15deg); /* Для Firefox */
-ms-transform: rotate(15deg); /* Для IE */
-webkit-transform: rotate(15deg); /* Для Safari, Chrome, iOS */
-o-transform: rotate(15deg); /* Для Opera */
transform: rotate(15deg);
}
</style>
</head>
<body>
<p><thumb src="images/igels.png" alt="Ёжик" class="turn">
<thumb src="images/igels.png" alt="Ёжик" class="turn"></p>
</body>
</html>В данном примере при наведении курсора на изображение оно поворачивается на 15 градусов по часовой стрелке.
Объектная модель
[window.]document.getElementById("elementID").style.transform
Браузеры
Internet Explorer 9 поддерживает нестандартное свойство -ms-transform.
Chrome, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transform.
Opera до версии 12.10 поддерживает нестандартное свойство -o-transform.
Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transform.
|
|
|
|
АВТОРИЗАЦИЯ
|
• Мы информационный портал, на котором публикуются новости веб-дизайна и мелкие хитрости, а так же информация и советы которые вам смогут помочь по созданию сайтов, шаблонов, и многое другое. Вы также сможете найти интересные уроки по CSS3, HTML5, jQuery, Photoshop и и многое другое, интересное, с интернет мира. Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не хочется." «Самоучитель CSS » © Мы транслируем с 2006 года. Все для веб-дизайнера - CSS. Все материалы публикуют на сайте гости и пользователи сайта. Администрация сайта не несет ответственности за публикации. |
|