От автора: посмотрите на заголовок блога на сайте оригинальной статьи, он имеет наклон. Одна из моих любимых вещей в новом дизайне этого сайта. Используемой мной технике не важен размер экрана, угол наклона будет всегда одним и тем же. На фон можно поставить изображение, а для создания такого эффекта мне потребовался всего один HTML тег и никаких псевдоэлементов. Как я это сделал.
Требования
Если коротко, то у данного способа были требования.
смотреться одинаково с любым размером экрана;
поддерживать фоновые изображения и текст переднего плана;
работать на всех устройствах (за IE не беспокойтесь).
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Ну и если можно максимально упростить HTML и CSS, но это уже как бонус, а не требование.
Начальная идея
Первоначально для создания наклонных граней я хотел использовать поворот на всем элементе в свойстве transform. Этот подход приводит к быстро возрастающей сложности.
|
header { width:100%; transform:rotate(2deg); } |
Поворачивая элемент, мы оголяем задний фон в верхнем левом и правом углу. Это можно поправить, сделав внутренний элемент шире и добавив отрицательное смещение, чтобы элемент правильно закрывал верхний левый и правый углы:
|
header { width:110%; top:—5%; left:—5%; transform:rotate(2deg); } |
Далее добавляем на страницу или дополнительный элемент overflow:hidden, чтобы нас не смущала горизонтальная полоса прокрутки:
|
body { overflow:hidden; } header { width:110%; top:—5%; left:—5%; transform:rotate(2deg); } |
Смотрится хорошо, но что будет, если добавить текст?
Текст не только наклонен, но и немного уходит за левую границу. Чтобы поправить текст, нам нужно повернуть его в противоположном направлении и сместить.
|
body { overflow:hidden; } header { width:110%; top:—5%; left:—5%; transform:rotate(2deg); } header p { margin—left:5%; transform:rotate(—2deg); } |
До этих самых пор все работает просто замечательно. Проблемы начинаются, когда вы переходите с фиксированной ширины на адаптивную. Тот же самый элемент, только шире:
Сверху справа опять начинает вылезать задний фон. Единственный выход – растянуть заголовок за видимые пределы. Так будет при каждом увеличении экрана, что сильно затрудняет способ и делает его ненадежным.
Кроме того, при использовании трансформаций по краям наблюдается легкая пикселизация. Этот баг исправят в новых версиях браузеров, однако сейчас это смотрится не очень красиво.
Псевдоэлемент ::after
Другая часто используемая техника – использование свойства transform на псевдоэлементе ::after, а не самом элементе. По сравнению с предыдущим кодом у этого метода есть несколько преимуществ:
не нужно думать о том, что в верхних левом и правом углах будет выглядывать фон;
не нужно поворачивать обратно контент.
Давайте попробуем:
|
header::after { position:absolute; content: » «; display:block; left:—5%; bottom:—10px; transform:rotate(2deg); width:110%; } |
Я добавил немного прозрачности, чтобы было понятно расположение элементов. Метод работает, однако нужно слегка сдвинуть элемент after вверх, чтобы он полностью закрывал нижнюю грань блока. Как и в примерах выше, псевдоэлемент должен быть немного шире, чтобы слева и справа не вылезали углы. Я отключил свойство overflow:hidden;, чтобы вы увидели, насколько псевдоэлемент вылезает за видимые границы.
Эффект хорошо смотрится только, когда фон блока и псевдоэлемента совпадают.
Псевдоэлемент ::after с рамкой
В CSS можно комбинировать видимые и прозрачные рамки для создания треугольников, которые будут заменять наклонные грани. Давайте создадим псевдоэлемент ::after с наклонной рамкой:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
|
header::after { position:absolute; content: » «; display:block; left:0; bottom:—20px; width:100%; border—style: solid; border—width: 0 100vw 20px 0; border—color: transparent rgba(0,0,0,0.4) transparent transparent; } |
Смотрится хорошо, у данного способа намного лучше сглаживание. Метод работает даже, если сильно расширить блок (при условии, что используется сопоставимая ширина рамки):
Я также видел, как вместо рамок используют фоновое изображение формата SVG, которое на 100% ширины и высоты занимает область элемента ::after. Результат будет тот же самый.
На данный момент лучше всего смотрится способ с рамками. В нем не так много кода, однако метод неидеальный по нескольким причинам:
используется еще один абсолютно позиционированный элемент, о котором нужно помнить;
трудно поддерживать нужный угол наклона;
можно использовать только монотонные фоновые цвета.
На данный момент ни один из моих примеров не использовал фоновые изображения (это само по себе сложно), но иногда мне действительно хочется поставить в заголовок или футер фоновое изображение. Псевдоэлемент ::after вообще не поддерживает такой эффект. С трансформированным хедером возникнут свои проблемы, связанные с позиционированием фонового рисунка.
Все вышеописанные варианты либо сложны в плане кода, либо не достаточно гибкие, когда нужно одинаково выглядеть на всех экранах.
Метод на clip-path
Трансформации и рамки с ::after не подходят, остался только один способ – clip-path.
Clip-path не очень хорошо поддерживается. Он работает только в браузерах Webkit, Blink и Gecko. Для последнего также нужен тег SVG. К счастью для меня я могу спокойно использовать этот метод на своем блоге.
Добавить clip-path довольно просто. Нужно воспользоваться функцией polygon и создать трапецию (прямоугольник с наклонными гранями):
|
header { clip—path: polygon( 0 0, /* лево верх */ 100% 0, /* право верх */ 100% 100%, /* право низ */ 0 90% /* лево низ */ ); } |
Все отлично работает! Метод делает все то, что не могут предыдущие способы. Можно поставить фоновое изображение, ничего не вылезает за края, края острые, а для создания эффекта потребовался всего один тег header.
Единственный недостаток – трапеция привязана к элементу. Если у элемента изменится соотношение ширины и высоты, то изменится и угол наклона нижней грани. На мобильных устройствах наклон будет сильным, а на ретина экранах почти незаметным. Тот же самый clip-path, но на широком элементе:
Наклон намного меньше, эффект тоже меньше. А мы хотим, чтобы наклон был одинаковым вне зависимости от ширины элемента. Я решил эту проблему при помощи единиц измерения vw.
Вычисления на основе ширины
Проценты в объявлении трапеции привязывают точки фигуры к высоте элемента. Чтобы угол наклона был постоянным, нам нужно менять значения высоты. Если равномерно менять значения, угол наклона будет оставаться неизменным.
Сделать это можно при помощи единиц измерения vw. С их помощью мы будем определять позицию левой нижней точки относительно нижней грани элемента. Для этого в CSS нам понадобится функция calc():
|
header { clip—path: polygon( 0 0, 100% 0, 100% 100%, 0 calc(100% — 6vw) ); } |
Если теперь изменить ширину, то позиция левой нижней точки будет опускаться, создавая эффект того, что угол наклона не меняется.
Если хотите сделать наклонной верхнюю грань, это будет еще проще. Заменяете первую строку на «6vw 0», даже не нужна функция calc().
Прокрутите страницу к хедеру или футеру, посмотрите эффект в действии.
Поддержка в Firefox
К сожалению, Firefox поддерживает только SVG полигоны для записи clip path. Пока в этом браузере не будет нормальной поддержки, у всех будут разные углы.
Создание clip-path для Firefox требует знаний SVG. SVG clipPaths принимает как значения типа пикселей, так и значения с плавающей точкой от 0 до 1 для процентов. В SVG есть атрибут clipPathUnits=»objectBoundingBox», с помощью которого браузер может получить размеры элемента и применить clip-path к нему. Без атрибута будут использоваться размеры SVG. Если совместить значения с плавающей точкой и этот атрибут, можно получить трапецию, которую мы создали выше:
|
<svg xmlns=«//www.w3.org/2000/svg» xmlns:xlink=«//www.w3.org/1999/xlink»> <defs> <clipPath id=«header» clipPathUnits=«objectBoundingBox»> <polygon points=«0 0, 1 0, 1 1, 0 0.87» /> </clipPath> </defs> </svg> |
Запись @moz-document – это хак, чтобы правило не применялось в других браузерах. Или же, как заметил Sven Wolfermann, просто задайте url() clip-path перед polygon() clip-path, и Firefox автоматически сделает фолбек. Когда в Firefox добавится поддержка (намечается на середину апреля 2017), браузер автоматически начнет использовать функцию polygon().
Кроме одинакового наклона на разных экранах браузер использует все бонусы CSS clip-path: элемент имеет нормальное расположение, углы отлично сглаживаются, а фон применяется ровно так, как вы ожидаете.
Наклоненные под одним углом края в CSS
Собственно, вот так можно создать в CSS наклоненные под одним углом грани. Не нужно использовать overflow:hidden, можно поставить на фон изображение, а также для создания эффекта нужен всего один тег.
Источник: //kilianvalkhof.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
Смотреть
CSS функция skew() трансформирует элемент, наклоняя его в 2D-пространстве.
Интерактивный пример
Данная трансформация является линейным преобразованием векторного пространства (трансвекция или shear mapping), которое деформирует каждую точку элемента на определённый угол по горизонтали или вертикали. Координаты каждой точки изменяются на величину, пропорциональную указанному углу и расстоянию до точки, относительно которой выполняется трансформация (origin); таким образом, чем больше расстояние до смещаемой точки элемента, тем больше она будет смещена по горизонтали или вертикали.
Синтаксис
Функция skew() задаётся одним или двумя значениями которые отображают наклон в каждом из направлений.
skew(ax) skew(ax, ay)
Значения
ax-
Указывается значение
<angle>, которое является углом наклона вдоль оси X. ay-
Указывается значение
<angle>, которое является углом наклона вдоль оси Y. Если данное значение не задано, то по умолчанию оно равно0. В этом случае вертикального наклона не будет, а будет только горизонтальный.
| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
|---|---|---|---|
|
1 tan(ay) |
1 tan(ay) 0 |
1 tan(ay) 0 |
1 tan(ay) 0 0 |
[1 tan(ay) tan(ax) 1 0 0] |
Примеры
Используя только наклон по оси x
HTML
<div>Обычный</div>
<div class="skewed">Наклонённый</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.skewed {
transform: skew(10deg); /* Equal to skewX(10deg) */
background-color: pink;
}
Result
Используя два угла
HTML
<div>Обычный</div>
<div class="skewed">Наклонённый</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.skewed {
transform: skew(10deg, 10deg);
background-color: pink;
}
Результат
Поддержка браузеров
Please see the <transform-function> data type for compatibility info.
Смотрите также
В этой статье речь пойдет о трансформациях элементов в CSS, или по-другому их еще называют функции преобразования элемента. Мы с Вами научимся наклонять, крутить и даже масштабировать элементы на странице, как в двухмерном, так и в трехмерном пространстве.
Рис. 171 Пример трансформации в повседневной жизни.
Не будем откладывать в долгий ящик знакомство со свойством transform
, так как в этой статье главное это практическое знакомство с темой, а не теоретическое. Чтобы преобразовать любой элемент необходимо использовать свойство transform с интересующей нас функцией, которая определяет, какое преобразование необходимо провести.
Допускается даже перечислять несколько функций в одном объявлении, при этом необходимо разделять их пробелом, но об этом немного позднее.
CSS свойство transform позволяет применить к элементу как двухмерные, так и трехмерные трансформации.
Обратите внимание, что все современные браузеры имеют поддержку этого свойства и соответственно не грех начать использовать его в своих проектах:
Не в первый раз повторяюсь, что в примерах мы не будем использовать вендорные префиксы производителей, но если Вы хотите обеспечить более широкую поддержку браузеров, то стоит о них не забывать.
Наклон элементов
Для начала разомнемся и научимся делать наклоны. Не забывайте о своём здоровье, неплохо будет, если вы будете повторять движения за элементами, тогда вы получите не только плюс в знаниях, но и сохраните свою осанку. Не переусердствуйте =)
И так, рассмотрим пример, в котором мы применим первое преобразование – skew(), оно определяет двухмерное преобразование путем наклона элемента относительно осей X (горизонтальная ось) и Y (вертикальная ось).
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Наклоны элементов в CSS</title> <style> .static { display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */ margin: 10px; /* внешние отступы со всех сторон */ background: gray; /* цвет заднего фона */ } div { width: 180px; /* ширина элемента */ height: 100px; /* высота элемента */ line-height: 100px; /* высота строки (выраывниваем по вертикали) */ text-align: center; /* горизонтальное выравнивание текста по центру */ transition: 0.2s; /* переходный эффект составляет 200 миллисекунд (0,2 секунды) */ } .test2, .test4, .test6 {background: orange;} /* цвет заднего фона */ .test, .test3, .test5 {background: plum;} /* цвет заднего фона */ .test:hover { transform: skew(20deg, 30deg); /* определяем наклон элемента при наведении */ } .test2:hover { transform: skew(-20deg, -30deg); /* определяем наклон элемента при наведении */ } .test3:hover { transform: skew(20deg); /* определяем наклон элемента при наведении */ } .test4:hover { transform: skew(-20deg); /* определяем наклон элемента при наведении */ } .test5:hover { transform: skew(70deg, 0deg); /* определяем наклон элемента при наведении */ } .test6:hover { transform: skew(0deg, 40deg); /* определяем наклон элемента при наведении */ } </style> </head> <body> <div class = "static"><div class = "test">skew(20deg, 30deg)</div></div> <div class = "static"><div class = "test2">skew(-20deg, -30deg)</div></div> <div class = "static"><div class = "test3">skew(20deg)</div></div><br> <div class = "static"><div class = "test4">skew(-20deg)</div></div> <div class = "static"><div class = "test5">skew(70deg, 0deg)</div></div> <div class = "static"><div class = "test6">skew(0deg, 40deg)</div></div> </body> </html>
Эта функция принимает в качестве параметров только значения в градусах (degree). Обращаю Ваше внимание, что в большинстве случаев высокие значения будут приводить к серьезным искажениям элемента. Как Вы можете заметить, при использовании отрицательных значений элемент будет наклоняться зеркально.
Обратите внимание, что допускается указывать только одно значение, в этом случае наклон элемента произойдет только по оси X.
Элемент по умолчанию всегда поворачивается относительно своего центра, мы позднее научимся изменять это поведение (изменять исходную точку преобразования).
Результат нашего примера:
Современный стандарт имеет еще две функции, которые позволяют наклонять элементы. Это функция skewX(), она определяет двухмерное преобразование путем наклона элемента относительно оси X и skewY(), которая позволяет наклонить элемент относительно оси Y. Они принимают только одно значение в градусах в качестве параметра.
Давайте рассмотрим их применение.
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Наклоны элементов по осям</title> <style> .static { display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */ margin: 10px; /* внешние отступы со всех сторон */ background: gray; /* цвет заднего фона */ } div { width: 180px; /* ширина элемента */ height: 100px; /* высота элемента */ line-height: 100px; /* высота строки (выраывниваем по вертикали) */ text-align: center; /* горизонтальное выравнивание текста по центру */ transition: 0.2s; /* переходный эффект составляет 200 миллисекунд (0,2 секунды) */ } .test2, .test4, .test6 {background: orange;} /* цвет заднего фона */ .test, .test3, .test5 {background: plum;} /* цвет заднего фона */ .test:hover { transform: skewX(20deg); /* определяем наклон элемента по оси X при наведении */ } .test2:hover { transform: skewX(-20deg); /* определяем наклон элемента по оси X при наведении */ } .test3:hover { transform: skewX(45deg); /* определяем наклон элемента по оси X при наведении */ } .test4:hover { transform: skewY(20deg); /* определяем наклон элемента по оси Y при наведении */ } .test5:hover { transform: skewY(-20deg); /* определяем наклон элемента по оси Y при наведении */ } .test6:hover { transform: skewY(45deg); /* определяем наклон элемента по оси Y при наведении */ } </style> </head> <body> <div class = "static"><div class = "test">skewX(20deg)</div></div> <div class = "static"><div class = "test2">skewX(-20deg)</div></div> <div class = "static"><div class = "test3">skewX(70deg)</div></div><br> <div class = "static"><div class = "test4">skewY(20deg)</div></div> <div class = "static"><div class = "test5">skewY(-20deg)</div></div> <div class = "static"><div class = "test6">skewY(70deg)</div></div> </body> </html>
В этом примере мы использовали для верхнего ряда элементов функцию skewX(), которая позволяет производить наклоны элементов по оси X (горизонтальная ось), а для нижнего ряда элементов использовали функцию skewY(), которая позволяет производить наклоны элементов по оси Y (вертикальная ось). Обратите внимание, что, как и при использовании функции skew() допускается использовать отрицательные значения, наклон при этом будет зеркален положительному значению.
Результат нашего примера:
Двухмерный поворот элементов
Следующая функция, с которой нам предстоит разобраться – rotate(), она позволяет повернуть (вращать) элемент (задает двухмерный поворот по часовой стрелке, либо против часовой стрелки при использовании отрицательных значений).
Допускается указывать значения угла поворота в следующих единицах измерения:
- deg — градусы. Оборот окружности составляет 360deg.
- grad — грады. Оборот окружности составляет 400grad.
- rad — радианы. Оборот окружности составляет 2π (~6.28rad).
- turn — обороты. Оборот окружности составляет 1turn.
Например, прямой угол составляет 90deg или 100grad или 0.25turn или примерно ~1.57rad.
Давайте рассмотрим следующий пример:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Поворот элементов в CSS</title> <style> .static { display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */ margin: 10px; /* внешние отступы со всех сторон */ background: gray; /* цвет заднего фона */ } div { width: 180px; /* ширина элемента */ height: 100px; /* высота элемента */ line-height: 100px; /* высота строки (выраывниваем по вертикали) */ text-align: center; /* горизонтальное выравнивание текста по центру */ transition: 0.2s; /* переходный эффект составляет 200 миллисекунд (0,2 секунды) */ } .test2, .test4, .test6 {background: orange;} /* цвет заднего фона */ .test, .test3, .test5 {background: plum;} /* цвет заднего фона */ .test:hover { transform: rotate(45deg); /* определяем поворот элемента при наведении */ } .test2:hover { transform: rotate(-45deg); /* определяем поворот элемента при наведении */ } .test3:hover { transform: rotate(3.5rad); /* определяем поворот элемента при наведении */ } .test4:hover { transform: rotate(200grad); /* определяем поворот элемента при наведении */ } .test5:hover { transform: rotate(-0.75turn); /* определяем поворот элемента при наведении */ } .test6:hover { transform: rotate(2turn); /* определяем поворот элемента при наведении */ } </style> </head> <body> <div class = "static"><div class = "test">rotate(45deg)</div></div> <div class = "static"><div class = "test2">rotate(-45deg)</div></div> <div class = "static"><div class = "test3">rotate(3.5rad)</div></div><br> <div class = "static"><div class = "test4">rotate(200grad)</div></div> <div class = "static"><div class = "test5">rotate(-0.75turn)</div></div> <div class = "static"><div class = "test6">rotate(2turn)</div></div> </body> </html>
В этом примере с использованием функции rotate() мы задали для элементов различные значения поворота элемента при наведении. Значения были указаны в градусах, градах, радианах и в количистве оборотов.
Результат нашего примера.
Трехмерный поворот элементов
Следующие функции, которые мы рассмотрим, позволяют вращать элементы в трехмерном пространстве. Мы начнем знакомство с трехмерными преобразованиями с функций rotateX(), rotateY() и rotateZ(). Как вы можете догадаться, каждая из них по отдельности контролирует вращение элемента по определенной оси в пространстве.
Рис. 175 Схема вращения элементов по осям X, Y и Z.
Перейдем к примеру, в котором рассмотрим применение этих функций.
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Поворот элементов по осям</title> <style> .static { display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */ margin: 10px; /* внешние отступы со всех сторон */ background: gray; /* цвет заднего фона */ } div { width: 180px; /* ширина элемента */ height: 100px; /* высота элемента */ line-height: 100px; /* высота строки (выраывниваем по вертикали) */ text-align: center; /* горизонтальное выравнивание текста по центру */ transition: 0.2s; /* переходный эффект составляет 200 миллисекунд (0,2 секунды) */ } .test2, .test4, .test6 {background: orange;} /* цвет заднего фона */ .test, .test3, .test5 {background: plum;} /* цвет заднего фона */ .test:hover { transform: rotateX(60deg); /* определяем поворот элемента по оси X при наведении */ } .test2:hover { transform: rotateX(-160deg); /* определяем поворот элемента по оси X при наведении */ } .test3:hover { transform: rotateY(20deg); /* определяем поворот элемента по оси Y при наведении */ } .test4:hover { transform: rotateY(60deg); /* определяем поворот элемента по оси Y при наведении */ } .test5:hover { transform: rotateZ(20deg); /* определяем поворот элемента по оси Z при наведении */ } .test6:hover { transform: rotateZ(145deg); /* определяем поворот элемента по оси Z при наведении */ } </style> </head> <body> <div class = "static"><div class = "test">rotateX(60deg)</div></div> <div class = "static"><div class = "test2">rotateX(-160deg)</div></div> <div class = "static"><div class = "test3">rotateY(20deg)</div></div><br> <div class = "static"><div class = "test4">rotateY(60deg)</div></div> <div class = "static"><div class = "test5">rotateZ(20deg)</div></div> <div class = "static"><div class = "test6">rotateZ(145deg)</div></div> </body> </html>
В этом примере мы рассмотрели три функции преобразования, которые позволяют контролировать поворот элемента по заданной оси.
Результат нашего примера:
Теперь, когда у нас есть понимание, как происходит трехмерный поворот элемента, мы рассмотрим функцию rotate3d(), которая позволит нам задать трехмерный поворот по часовой стрелке, либо против часовой стрелки (при использовании отрицательных значений).
Функция rotate3d() имеет следующий синтаксис:
rotate3d(x, y, z, angle)
Элемент поворачивается под углом, задаваемым последним параметром относительно вектора направления. Первые три параметра определяют, вокруг какой из осей координат будет вращаться объект (X, Y, Z), а последний параметр определяет угол, задаваемый в градусах. Значения X, Y и Z должны задаваться в виде чисел (соотношение углов).
Например, rotate3d(2, 1, 0, 50deg) заставит объект повернуться на 50 градусов по оси X, по оси Y на (50 * 1 / 2) = 25 градусов и по оси Z вращение не происходит.
Рассмотрим следующий пример:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Трехмерный поворот элемента</title> <style> .static { display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */ margin: 10px; /* внешние отступы со всех сторон */ background: gray; /* цвет заднего фона */ } div { width: 180px; /* ширина элемента */ height: 100px; /* высота элемента */ line-height: 100px; /* высота строки (выраывниваем по вертикали) */ text-align: center; /* горизонтальное выравнивание текста по центру */ transition: 0.2s; /* переходный эффект составляет 200 миллисекунд (0,2 секунды) */ } .test2, .test4, .test6 {background: orange;} /* цвет заднего фона */ .test, .test3, .test5 {background: plum;} /* цвет заднего фона */ .test:hover { transform: rotate3d(2,1,0, 50deg); /* определяем трехмерный поворот элемента при наведении */ } .test2:hover { transform: rotate3d(2,1,0, -50deg); /* определяем трехмерный поворот элемента при наведении */ } .test3:hover { transform: rotate3d(1,1,1, 50deg); /* определяем трехмерный поворот элемента при наведении */ } .test4:hover { transform: rotate3d(4,2,2, 50deg); /* определяем трехмерный поворот элемента при наведении */ } .test5:hover { transform: rotate3d(4,2,2, -50deg); /* определяем трехмерный поворот элемента при наведении */ } .test6:hover { transform: rotate3d(4,2,2, 1turn); /* определяем трехмерный поворот элемента при наведении */ } </style> </head> <body> <div class = "static"><div class = "test">rotate3d(2,1,0, 50deg)</div></div> <div class = "static"><div class = "test2">rotate3d(2,1,0, -50deg)</div></div> <div class = "static"><div class = "test3">rotate3d(1,1,1, 50deg)</div></div><br> <div class = "static"><div class = "test4">rotate3d(4,2,2, 50deg)</div></div> <div class = "static"><div class = "test5">rotate3d(4,2,2, -50deg)</div></div> <div class = "static"><div class = "test6">rotate3d(4,2,2, 1turn)</div></div> </body> </html>
В этом примере были использованы различные значения функции rotate3d(), благодаря которой, мы вращаем элемент в трехмерном пространстве.
Результат нашего примера:
Масштабирование элементов
Следующая функция scale(), она определяет двухмерное преобразование путем масштабирования элемента по оси X и по оси Y. Допускается использование одного значения, в этом случае элемент масштабируется с указанным значением как по оси X, так и по оси Y. К примеру, значение scale(0.5) уменьшит элемент в 2 раза (как по оси X, так и по оси Y).
Обратите внимание на то, что значения функции больше одного увеличивают элемент, а меньше одного уменьшают. При использовании отрицательных значений элемент отображается зеркально.
Рассмотрим пример использования:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Масштабирование элементов</title> <style> .static { display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */ margin: 10px; /* внешние отступы со всех сторон */ background: gray; /* цвет заднего фона */ } div { width: 180px; /* ширина элемента */ height: 100px; /* высота элемента */ line-height: 100px; /* высота строки (выраывниваем по вертикали) */ text-align: center; /* горизонтальное выравнивание текста по центру */ transition: 0.2s; /* переходный эффект составляет 200 миллисекунд (0,2 секунды) */ } .test2, .test4, .test6 {background: orange;} /* цвет заднего фона */ .test, .test3, .test5 {background: plum;} /* цвет заднего фона */ .test:hover { transform: scale(0.5); /* масштабируем элемент при наведении */ } .test2:hover { transform: scale(0.5, 0.8); /* масштабируем элемент при наведении */ } .test3:hover { transform: scale(0.5, 1); /* масштабируем элемент при наведении */ } .test4:hover { transform: scale(-0.5, -1); /* масштабируем элемент при наведении */ } .test5:hover { transform: scale(2, 2); /* масштабируем элемент при наведении */ } .test6:hover { transform: scale(0,0.5); /* масштабируем элемент при наведении */ } </style> </head> <body> <div class = "static"><div class = "test">scale(0.5)</div></div> <div class = "static"><div class = "test2">scale(0.5, 0.8)</div></div> <div class = "static"><div class = "test3">scale(0.5, 1)</div></div><br> <div class = "static"><div class = "test4">scale(-0.5, -1)</div></div> <div class = "static"><div class = "test5">scale(2, 2)</div></div> <div class = "static"><div class = "test6">scale(0, 0.5)</div></div> </body> </html>
В этом примере мы использовали различные значения функции scale(), благодаря которой, мы масштабируем элементы,- увеличивая, или уменьшая их.
Результат нашего примера:
По аналогии с предыдущими функциями Вы можете производить масштабирование элементов и для конкретной оси, для этого в CSS существуют функции преобразования scaleX(), scaleY() и scaleZ().
Рассмотрим их в следующем примере:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Масштабирование элементов по осям</title> <style> .static { display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */ margin: 10px; /* внешние отступы со всех сторон */ background: gray; /* цвет заднего фона */ } div { width: 180px; /* ширина элемента */ height: 100px; /* высота элемента */ line-height: 100px; /* высота строки (выраывниваем по вертикали) */ text-align: center; /* горизонтальное выравнивание текста по центру */ transition: 0.2s; /* переходный эффект составляет 200 миллисекунд (0,2 секунды) */ } .test2, .test4, .test6 {background: orange;} /* цвет заднего фона */ .test, .test3, .test5 {background: plum;} /* цвет заднего фона */ .test:hover { transform: scaleX(0.5); /* масштабируем элемент по оси X при наведении */ } .test2:hover { transform: scaleX(-0.5); /* масштабируем элемент по оси X при наведении */ } .test3:hover { transform: scaleY(0.5); /* масштабируем элемент по оси Y при наведении */ } .test4:hover { transform: scaleY(-0.5); /* масштабируем элемент по оси Y при наведении */ } .test5:hover { transform: perspective(500px) scaleZ(-2) rotateX(45deg); /* используем несколько функций преобразования для элемента (перспектива, поворот по оси X, масштабирование по оси Z) */ } .test6:hover { transform: perspective(500px) scaleZ(6) rotateX(45deg); /* используем несколько функций преобразования для элемента (перспектива, поворот по оси X, масштабирование по оси Z) */ } </style> </head> <body> <div class = "static"><div class = "test">scaleX(0.5)</div></div> <div class = "static"><div class = "test2">scaleX(-0.5)</div></div> <div class = "static"><div class = "test3">scaleY(0.5)</div></div><br> <div class = "static"><div class = "test4">scaleY(-0.5)</div></div> <div class = "static"><div class = "test5">scaleZ(-2) *</div></div> <div class = "static"><div class = "test6">scaleZ(6) *</div></div> </body> </html>
Для демонстрации работы трехмерного масштабирования функцией scaleZ(), мы добавили несколько функций для элемента перечисленных через пробел. Функция rotateX() поворачивает наш элемент по оси X при наведении, а новая для Вас функция преобразования perspective() определяет перспективу обзора элемента, создавая для пользователя иллюзию глубины. Чем больше значение, указанное для функции перспективы, тем дальше от пользователя расположен элемент. Значение должно быть больше нуля. Мы еще вернемся к более подробному изучению этой функции в следующей статье учебника.
Результат нашего примера:
Трехмерное масштабирование элементов
Следующая функция, которую мы рассмотрим это функция scale3d(), она определяет трехмерное преобразование путем масштабирования элемента по оси X, по оси Y и по оси Z. Перейдем к примеру:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Трехмерное масштабирование элементов по осям</title> <style> .static { display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */ margin: 10px; /* внешние отступы со всех сторон */ background: gray; /* цвет заднего фона */ } div { width: 180px; /* ширина элемента */ height: 100px; /* высота элемента */ line-height: 100px; /* высота строки (выраывниваем по вертикали) */ text-align: center; /* горизонтальное выравнивание текста по центру */ transition: 0.2s; /* переходный эффект составляет 200 миллисекунд (0,2 секунды) */ } .test2, .test4, .test6 {background: orange;} /* цвет заднего фона */ .test, .test3, .test5 {background: plum;} /* цвет заднего фона */ .test:hover { transform: perspective(500px) rotateX(45deg) scale3d(1,2,1); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */ } .test2:hover { transform: perspective(500px) rotateX(45deg) scale3d(2,1,1); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */ } .test3:hover { transform: perspective(500px) rotateX(45deg) scale3d(1,1,2); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */ } .test4:hover { transform: perspective(500px) rotateX(45deg) scale3d(-1,-2,-1); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */ } .test5:hover { transform: perspective(500px) rotateX(45deg) scale3d(0.5,1,1); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */ } .test6:hover { transform: perspective(500px) rotateX(45deg) scale3d(0.5,0.5,2); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерное масштабирование) */ } </style> </head> <body> <div class = "static"><div class = "test">scale3d(1,2,1)</div></div> <div class = "static"><div class = "test2">scale3d(2,1,1)</div></div> <div class = "static"><div class = "test3">scale3d(1,1,2)</div></div><br> <div class = "static"><div class = "test4">scale3d(-1,-2,-1)</div></div> <div class = "static"><div class = "test5">scale3d(0.5,1,1)</div></div> <div class = "static"><div class = "test6">scale3d(0.5,0.5,2)</div></div> </body> </html>
В этом примере были использованы различные значения функции scale3d(), благодаря которой, мы масштабируем элемент сразу по трём осям.
Для демонстрации работы трехмерного масштабирования функцией scale3d(), мы добавили функцию rotateX(), которая поворачивает наш элемент по оси X и функцию преобразования perspective(), которая определяет перспективу обзора элемента, создавая для пользователя иллюзию глубины.
Результат нашего примера:
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практические задания:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла и изображение) в любую папку на вашем жестком диске:
-
Используя полученные знания составьте следующий документ в котором два блока с изображением. В первом блоке при наведении на изображение оно плавно приближается, а во втором блоке изображение уже увеличено и при наведении оно плавно отдаляется к первоначальному размеру:
Практическое задание № 34. Подсказка: для отдаления, либо приближения изображения Вам необходимо воспользоваться вышерассмотренной функцией scale(). Кроме того, Вам необходимо скрывать переполнение внутри блока с изображением, для этого Вам поможет CSS свойство overflow
. -
В следующем практическом примере я предлагаю Вам создать красивое меню навигации. Ранее мы не рассматривали создание навигации, но в этом нет ничего сложного. В большинстве случаев навигация основана на том, что при наведении на определённый элемент отображаются скрытые элементы. Отображение элементов в большинстве случаев осуществляется за счет измененения значения свойства display со значения none (элемент не отображается) на, например, block (если нам необходимо после отображения увидеть блочный элемент). Это не единственный способ как можно скрывать элементы меню и так как эта тема, напомню, трансформирование элементов, то мы с Вами рассмотрим скрытие с помощью функции scaleY().
Я предлагаю следующую структуру нашего горизонтального меню навигации:
<nav> <!-- Семантическая разметка меню (определяем навигацию) --> <ul class = "main-menu"> <!-- Маркированный список (для основных элементов меню) --> <li>Меню 1 <ul class = "sub-menu"> <!-- Вложенный маркированный список (для элементов подменю) --> <li><a href = "#">Подменю 1</a></li> ... <li><a href = "#">Подменю 5</a></li> </ul> </li> <li>Меню 2 <ul class = "sub-menu"> <!-- Вложенный маркированный список (для элементов подменю) --> <li><a href = "#">Подменю 1</a></li> ... <li><a href = "#">Подменю 5</a></li> </ul> </li> <li>Меню 3 <ul class = "sub-menu"> <!-- Вложенный маркированный список (для элементов подменю) --> <li><a href = "#">Подменю 1</a></li> ... <li><a href = "#">Подменю 5</a></li> </ul> </li> </ul> </nav>
Базовое задание: чтобы сделать нашу навигацию горизонтальной основные элементы <li> необходимо будет разместить в линейку (inline-block) и при наведении на них необходимо будет отображать вложенные элементы <ul> (маркированные списки). Попробуйте отобразить их с помощью изменения свойства display со значения none (элемент не отображается) на block, а уже позже после этого подумайте как это можно сделать с помощью функции scaleY().
Продвинутое задание: вложенные элементы <li> сделать наклонными, чередую наклон между четными и нечетными элементами.
Сложное задание: убрать наклон у текста, который находится внутри элементов <li>.
Меню навигации, которое у Вас должно получиться (размеры и цвет элементов могут быть произвольными):
Практическое задание № 35. Подсказка:
- Базовое задание: чтобы, вложенные списки не влияли на структуру основного меню навигации укажите для них абсолютное позиционирование (position: absolute), а для элементов основного меню относительное позиционирование (position: relative). Функция scaleY() со значением 0 скроет элемент, а со значением 1 отобразит.
- Продвинутое задание: чтобы задать наклон для четных и нечетных элементов списка воспользуйтесь псевдоклассом :nth-child и функцией skewX().
- Сложное задание: чтобы убрать наклон у текста Вам необходимо применить обратную трансформацию, то есть если у нас элемент списка наклонен на положительное количество градусов, то гиперссылка (элемент <a>), должна быть наклонена на тоже число градусов, но уже с отрицательным углом. Вторая проблема выбрать четные и не четные элементы <a>, так как они являются единственными детями своих родителей. Выбрать их селектором :nth-child у нас не получится, вернее не получится выбрать четные элементы, так как их по просту нет. Один из вариантов использовать отдельные классы, либо атрибуты. Я предлагаю использовать HTML 5 глобальный атрибут data-*, который позволяет создавать пользовательские атрибуты. После этого Вам необходимо будет просто применить селекторы атрибутов. У меня получилась следующая структура:
<li>Меню 1 <ul class = "sub-menu"> <li><a href = "#" data-odd>Подменю 1</a></li> <li><a href = "#" data-even>Подменю 2</a></li> <li><a href = "#" data-odd>Подменю 3</a></li> <li><a href = "#" data-even>Подменю 4</a></li> <li><a href = "#" data-odd>Подменю 5</a></li> </ul> </li>
Хочу еще раз напомнить Вам, что когда Ваши элементы имеют блочно-строчную структуру, то необходимо их писать внутри HTML в линейку, во избежании пробельных символов, которые появляются при переносе HTML кода на новую строку. В нашем примере это не очевидно, но когда вы будуете использовать процентные значения это может нарушить Вашу верстку. Более подробно об этом было рассмотрено ранее в статье «Размеры блочных элементов в CSS».
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
Наклоняет элемент в двумерном пространстве по горизонтали и вертикали или одновременно в двух направлениях.
Наклон с помощью skew(αx, αy) продемонстрирован в табл. 1.
 |
transform: skew(0) | Исходное изображение. |
|
transform: skew(10deg, 0) | Наклон влево на 10°. |
|
transform: skew(-10deg, 0) | Наклон вправо на 10°. |
|
transform: skew(0, 10deg) | Наклон вниз на 10°. |
|
transform: skew(0, -10deg) | Наклон вверх на 10°. |
|
transform: skew(10deg, 10deg) | Наклон влево и вниз на 10°. |
Синтаксис
transform: skew(αx);
transform: skew(αx, αy);Синтаксис
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- αx
- Задаёт угол наклона по горизонтали. Положительное значение наклоняет влево, отрицательное вправо.
- αy
- Задаёт угол наклона по вертикали. Положительное значение наклоняет вниз, отрицательное вверх. Если значение не указано, то по умолчанию принимается равным 0 и искажения по вертикали не происходит.
Одно значение задаёт наклон элемента только по горизонтали. Два значения задают наклон элемента по горизонтали и вертикали независимо. Значение 0 оставляет элемент без искажений.
Песочница
img {
transform: skew({{ playgroundValue }}deg);
}
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>skew()</title>
<style>
li {
background: #a9c358; /* Цвет фона */
list-style: none; /* Убираем маркеры */
width: 300px; /* Ширина списка */
margin-bottom: 10px; /* Отступ снизу */
transform: skew(-30deg); /* Наклоняем вправо */
}
li a {
color: #2c285d; /* Цвет ссылок */
text-decoration: none; /* Убираем подчёркивание */
display: block; /* Блочные ссылки */
padding: 5px 20px; /* Поля */
transform: skew(30deg); /* Наклоняем ссылки обратно */
}
</style>
</head>
<body>
<ul>
<li><a href=»#»>Пирамида Хеопса</a></li>
<li><a href=»#»>Висячие сады Семирамиды</a></li>
<li><a href=»#»>Статуя Зевса в Олимпии</a></li>
<li><a href=»#»>Храм Артемиды в Эфесе</a></li>
<li><a href=»#»>Мавзолей в Галикарнасе</a></li>
<li><a href=»#»>Колосс Родосский</a></li>
<li><a href=»#»>Александрийский маяк</a></li>
</ul>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Использование skew() для наклона
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Transforms Module Level 1 | Рабочий проект |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 9 | 12 | 4 | 11.5 | 3.1 | 3.5 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
<angle>
<angle> CSS , тип данных представляет собой значение угла , выраженное в градусах, радианах, gradians или поворотов. Он используется, например, в <gradient> и в некоторых функциях transform .
Try it
Syntax
Тип данных <angle> состоит из <number> , за которым следует одна из перечисленных ниже единиц. Как и во всех измерениях, между литералом единицы и числом нет пробела. Угловая единица является необязательной после числа 0 .
Необязательно, ему может предшествовать одиночный знак + или - . Положительные числа представляют углы по часовой стрелке, а отрицательные числа представляют углы против часовой стрелки. Для статических свойств данного устройства любой угол может быть представлен различными эквивалентными значениями. Например, 90deg равно -270deg и 1turn равна 4turn . Тем не менее, для динамических свойств, таких как применение animation или transition , эффект будет другим.
Units
deg-
Представляет угол в градусах . Один полный круг составляет
360deg. Примеры:0deg,90deg,14.23deg. grad-
Представляет угол в градусах . Один полный круг —
400grad. Примеры:0grad,100grad,38.8grad. rad-
Представляет угол в радианах . Один полный круг составляет 2π радиан, что приблизительно
6.2832rad.1radравен 180/π градусам. Примеры: 0 рад ,0rad,1.0708rad6.2832rad. turn-
Представляет угол в нескольких оборотах. Один полный круг — 1
1turn. Примеры:0turn,0.25turn,1.2turn.
Examples
Установка прямого угла по часовой стрелке
| |
90deg = 100grad = 0.25turn ≈ 1.5708rad |
Установка плоского угла
| |
180deg = 200grad = 0.5turn ≈ 3.1416rad |
Установка прямого угла против часовой стрелки
| |
-90deg = -100grad = -0.25turn ≈ -1.5708rad |
Установка нулевого угла
| |
0 = 0deg = 0grad = 0turn = 0rad |
Specifications
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | |
angle |
2 |
12 |
3.6 |
9 |
15 |
4 |
2 |
18 |
4 |
14 |
3.2 |
1.0 |
deg |
2 |
12 |
3.6 |
9 |
15 |
4 |
2 |
18 |
4 |
14 |
3.2 |
1.0 |
grad |
2 |
12 |
3.6 |
9 |
15 |
4 |
2 |
18 |
4 |
14 |
3.2 |
1.0 |
rad |
2 |
12 |
3.6 |
9 |
15 |
4 |
2 |
18 |
4 |
14 |
3.2 |
1.0 |
turn |
2 |
12 |
13 |
9 |
15 |
4 |
2 |
18 |
14 |
14 |
3.2 |
1.0 |
See also
- типы данных CSS
-
<gradient>тип - Преобразования вращения CSS:
rotate(),rotate3d(),rotateX(),rotateY()иrotateZ() - CSS transforms
- Использование CSS-трансформаций
- Использование градиентов CSS
CSS
-
all
Все сокращенное свойство CSS сбрасывает свойства элемента, кроме unicode-bidi, direction, Custom. Свойство all указывается как одно из глобальных значений CSS.
-
<alpha-value>
Тип данных CSS <alpha-value> представляет собой значение <number> или <percentage>, указывающее прозрачность канала цвета.
-
<angle-percentage>
Тип данных CSS <angle-percentage> представляет собой значение, которое может быть либо или Если <angle-percentage> указан как допустимый тип, это означает, что
-
animation
Свойство CSS сокращенного обозначения анимации применяется между стилями.
Добрый день, дорогие посетители!
При заполнении страниц сайта контентом часто возникает желание как-то украсить текст, выделить его, чтобы разнообразить подачу материала и сделать акцент на основных моментах статьи. Сделать это можно различными способами. Например, выделить отдельные фрагменты текста курсивом или сделать его наклонным.
Для реализации данного эффекта существует несколько способов. Я предлагаю сегодня рассмотреть, как реализовать наклонный текст CSS. Наклонный текст может быть нескольких видов. Уж так получается, что каждый вкладывает в это слово свое значение. Мы сегодня попробуем рассмотреть каждый из вариантов.
Первый, и наиболее распространенный способ сделать наклонный текст CSS заключается в использовании стиля font-style со значением italic. Данное свойство придает тексту в заданном блоке курсивное начертание. В результате получается такой вид:
Текст написанный курсивом.
Код HTML для текста:
|
<div class=«kursiv»> Текст написанный курсивом. </div> |
CSS-свойства:
|
.kursiv{ font-size:18px; font-style: italic; } |
Наклонный текст CSS
Отличие наклонного текста от курсива заключается в том, что курсив – это специальный шрифт, имитирующий рукописное написание, а наклонный текст получается в результате изменения угла наклона вправо.
Реализовать это можно так же, при помощи стиля font-style, но в этом случае нужно использовать значение oblique. Выглядеть это будет так:
Наклонный текст.
Код HTML:
|
<div class=«naklon»> Наклонный текст. </div> |
CSS-свойства:
|
.naklon{ font-size:18px; font-style: oblique; } |
В результате получается очень похоже на курсив, но если присмотреться, то можно увидеть некоторые отличия в начертании.
Наклон фрагмента текста CSS
Возможно, вам когда-нибудь понадобится сделать наклон фрагмента текста CSS под определенным углом по отношению к странице. Для реализации данного эффекта нужно использовать CSS-свойство transform с поворотом элемента на указанный угол rotate.
Для поворота элемента по часовой стрелке указываем положительное значение угла поворота. Для поворота против часовой стрелки – отрицательное значение.
Повернутый под углом фрагмент текста.
HTML-код фрагмента:
|
<div class=«povorot»> Повернутый под углом фрагмент текста. </div> |
CSS-свойства:
|
.povorot{ font-size:18px; transform:rotate(10deg); } |
Обратите внимание, как задается поворот фрагмента. Deg – является сокращением от английского слова degree (градус).
Произвольный наклон по горизонтали
В случае использования свойства font-style со значением oblique мы можем сделать наклонный текст CSS с определённым углом наклона вправо. Что же делать, если мы хотим изменить угол или направление наклона?
А в этом нам поможет то же свойство transform, но в этом случае нам нужно использовать значение skew, которое позволяет сделать горизонтальный наклон.
В результате наклона на 15 градусов фрагмент будет выглядеть вот так:
Горизонтальный наклон текста.
HTML-фрагмент кода:
|
<div class=«naklon_deg»> Горизонтальный наклон текста. </div> |
CSS-свойства:
|
.naklon_deg{ font—size:18px; transform:skew(15deg); } |
Как видите, при желании используя возможности CSS можно придать достаточно интересный вид выделяемого текста, а если немного пофантазировать, и использовать эти приемы совместно, то можно добиться еще более впечатляющих вариантов.
А на этом у меня на сегодня все. Если у вас возникнут вопросы, вы всегда можете задать их в комментариях. До встречи в следующих статьях!
С уважением Юлия Гусарь
Трансформации, переходы и анимации
Трансформации
Последнее обновление: 01.05.2016
Одним из нововведений CSS3 по сравнению с предыдущей версией является встроенная возможность трансформаций элемента.
К трансформациям относятся такие действия, как вращение элемента, его масштабирование, наклон или перемещение по вертикали или горизонтали.
Для создания трансформаций в CSS3 применяется свойство transform.
Вращение
Для поворота элемента свойство transform использует функцию rotate:
transform: rotate(угол_поворота deg);
После слова rotate в скобках идет величина угла поворота в градусах. Например, повернем блок на 30 градусов:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Трансформации в CSS3</title>
<style>
div{
background-color: #ccc;
width: 120px;
height: 120px;
margin:5px;
padding: 40px 10px;
box-sizing: border-box;
border: 1px solid #333;
display: inline-block;
}
.rotated{
transform: rotate(30deg);
}
</style>
</head>
<body>
<div></div>
<div class="rotated">rotate(30deg)</div>
<div></div>
</body>
</html>
При этом можно отметить, что при повороте вращаемый элемент может накладываться на соседние элементы, так как сначала происходит установка положения
элементов и только затем поворот.
Угол поворота может представлять как положительное, так и отрицательное значение. В случие отрицательного значения поворот производится в противоположную сторону.
Масштабирование
Применение масштабирования имеет следующую форму:
transform: scale(величина_масштабирования);
Используем маштабирование:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Трансформации в CSS3</title>
<style>
div{
background-color: #ccc;
width: 120px;
height: 120px;
margin:5px;
padding: 40px 10px;
box-sizing: border-box;
border: 1px solid #333;
display: inline-block;
}
.halfScale{
transform: scale(0.5);
}
.doubleScale{
transform: scale(2);
}
</style>
</head>
<body>
<div></div>
<div class="doubleScale">scale(2)</div>
<div></div>
<div class="halfScale">scale(0.5)</div>
</body>
</html>
Значение больше 1 приводит к растяжению по вертикали и горизонтали, а меньше 1 — к сжатию. То есть значение 0.5 приводит к уменьшению в два раза,
а значение 1.5 — к увеличению в полтора раза.
Можно также задать величины масштабирования отдельно для вертикали и горизонтали:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Трансформации в CSS3</title>
<style>
div{
background-color: #ccc;
width: 120px;
height: 120px;
margin:5px;
padding: 40px 10px;
box-sizing: border-box;
border: 1px solid #333;
display: inline-block;
}
.scale1{
transform: scale(2, 0.5);
}
</style>
</head>
<body>
<div></div>
<div class="scale1">scale(2, 0.5)</div>
<div></div>
</body>
</html>
В данном случае по горизонтали будет идти масштабирование в 2 раза, а по вертикали — в 0.5 раз.
Также можно по отдельности задать параметры масштабирования: функция scaleX() задает изменение по горизонтали, а
scaleY() — по вертикали. Например:
.scale1{
transform: scaleX(2);
}
Используя отрицательные значения, можно создать эффект зеркального отражения:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Трансформации в CSS3</title>
<style>
div{
background-color: #ccc;
width: 120px;
height: 120px;
margin:5px;
padding: 40px 10px;
box-sizing: border-box;
border: 1px solid #333;
display: inline-block;
}
.scale1{
transform: scaleX(-1);
}
</style>
</head>
<body>
<div></div>
<div class="scale1">scaleX(-1)</div>
<div></div>
</body>
</html>
Перемещение
Для перемещения элемента используется функция translate:
transform: translate(offset_X, offset_Y);
Значение offset_X указывает, на сколько элемент смещается по горизонтали, а offset_Y — по вертикали.
К примеру, сместим блок на 30 пикселей вниз и на 50 пикселей вправо:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Трансформации в CSS3</title>
<style>
div{
background-color: #ccc;
width: 120px;
height: 120px;
margin:5px;
padding: 40px 10px;
box-sizing: border-box;
border: 1px solid #333;
display: inline-block;
}
.translated{
transform: translate(50px, 30px);
background-color:red;
}
</style>
</head>
<body>
<div></div>
<div class="translated"></div>
<div></div>
</body>
</html>
В качестве единиц измерения смещения можно применять не только пиксели, но и любые другие единицы измерения длины в CSS — em, % и тд.
С помощью дополнительных функций можно отдельно применять смещения к горизонтали или вертикали: translateX() (перемещение
по горизонтали) и translateY() (перемещение по вертикали). Например:
transform: translateX(30px);
Кроме положительных значений также можно использовать и отрицательные — они перемещают элемент в противоположную сторону:
transform: translateY(-2.5em);
Наклон
Для наклона элемента применяется функция skew():
transform: skew(X, Y);
Первый параметр указывает, на сколько градусов наклонять элемент по оси X, а второй — значение наклона по оси Y.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Трансформации в CSS3</title>
<style>
div{
background-color: #ccc;
width: 120px;
height: 120px;
margin:5px;
padding: 40px 10px;
box-sizing: border-box;
border: 1px solid #333;
display: inline-block;
}
.skewed{
transform: skew(30deg, 10deg);
background-color:red;
}
</style>
</head>
<body>
<div></div>
<div class="skewed"></div>
<div></div>
</body>
</html>
Для создания наклона только по одной оси для другой оси надо использовать значение 0. Например, наклон на 45 градусов по оси X:
transform: skew(45deg, 0);
Или наклон на 45 градусов только по оси Y:
transform: skew(0,45deg);
Для создания наклона отдельно по оси X и по оси Y в CSS есть специальные функции: skewX() и skewY() соответственно.
transform: skewX(45deg);
Также можно передавать отрицательные значения. Тогда наклон будет осуществляться в противоположную сторону:
transform: skewX(-30deg);
Комбинирование преобразований
Если нам надо применить к элементу сразу несколько преобразований, скажем, вращаение и перемещение, то мы можем их комбинировать. Например,
применение всех четырех преобразований:
transform: translate(50px, 100px) skew(30deg, 10deg) scale(1.5) rotate(90deg);
Браузер применяет все эти функции в порядке их следования. То есть в данном случае сначала к элементу применяется перемещение, потом наклон, потом масштабирование и
в конце вращение.
Исходная точка трансформации
По умолчанию при применении трансформаций браузер в качестве точки начала преобразования использует центр элемента. Но с помощью свойства
transform-origin можно изменить исходную точку. Это свойство в качестве значения принимает значения в пикселях,
em и процентах. Также для установки точки можно использовать ключевые слова:
-
left top: левый верхний угол элемента -
left bottom: левый нижний угол элемента -
right top: правый верхний угол элемента -
right bottom: правый нижний угол элемента
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Трансформации в CSS3</title>
<style>
div{
background-color: #ccc;
width: 100px;
height: 100px;
margin: 80px 30px;
float: left;
box-sizing: border-box;
border: 1px solid #333;
}
.transform1{
transform: rotate(-45deg);
}
.transform2{
transform-origin: left top;
transform: rotate(-45deg);
}
.transform3{
transform-origin: right bottom;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="transform1"></div>
<div class="transform2"></div>
<div class="transform3"></div>
</body>
</html>
| 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><img src="images/igels.png" alt="Ёжик" class="turn">
<img 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.