Код CSS
#rotate_element {
-webkit-transform: rotate(90deg); // разворот элемента для разных бразуеров
transform: rotate(90deg);
}
lr-tb
текст направлен слева направо.
rl-tb
текст направлен справа налево.
tb-rl
текст направлен вертикально и выравнивается по верхнему и правому краю.
bt-rl
текст направлен вертикально и выравнивается по нижнему и правому краю.
tb-lr
текст направлен вертикально и выравнивается по верхнему и левому краю.
bt-lr
текст направлен вертикально и выравнивается по нижнему и левому краю.
На примере фразы текст идёт сюда
можно рассмотреть действие CSS-свойств
Код CSS
Text {
writing-mode: lr-tb; /* текст направлен слева направо */
}
Text1 {
writing-mode: rb-tb; /* текст направлен справа налево */
}
Код HTML и CSS
Пример
поворота элемента на 90 градусов на CSS можно просмотреть по ссылке ниже.
Сегодня мы с вами рассмотрим такой замечательный эффект, доступный нам благодаря CSS3. Речь идет о вращении блока или изображения. Он изумительно вписался в интерфейс сайта и, освоив данный урок, вы сможете применять данный эффект и в своих проектах.
Итак, у нас есть набор блоков с неким контентом. Мы хотим, чтобы при наведении на блок он поворачивался вокруг своей оси и показывал информацию на обороте. Думаю, все когда-то играли в карты и все помнят тот волнительный момент, когда нужно было их переворачивать картинкой вверх. Мы сейчас сделаем тоже самое. Вот наш исходный пример:
Начнем писать наш CSS. Первое, что нам предстоит сделать, раз мы работаем с 3D преобразованиями, - задать удаление нашего объекта от точки обзора. А вот и первый говнокод:
Flip-container { -webkit-perspective:1000; -moz-perspective:1000; -ms-perspective:1000; perspective:1000; }
Вы можете задать любое другое число. Поэкспериментируйте сами. Для передней (.front) и задней (.back) частей нашей игральной карты необходимо задать абсолютное позиционирование чтобы они «перекрывали» друг друга в конечном положении. Также нам нужно сделать чтобы обратная сторона переворачиваемых элементов во время анимации не отображалась. В этом нам поможет свойство backface-visibility :
Front, .back { -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0; }
Зададим z-index для лицевой стороны (чтобы она в дефолтном состоянии была на верху) опишем дефолтные углы поворота относительно вертикальной оси:
/* лицевая сторона размещена над обратной */ .front { -webkit-transform: rotateY(0deg); -moz-transform:rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); z-index: 2; } /* обратная, изначально скрытая сторона */ .back { transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); }
При наведении наши карточки будут поворачиваться, углы их сторон будут меняться с 0 до 180 градусов и со 180 градусов до 0:
/* лицевая сторона размещена над обратной */ .flip-container:hover .front { transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); } /* обратная, изначально скрытая сторона */ .flip-container:hover .back { -webkit-transform: rotateY(0deg); -moz-transform:rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }
Мы близки к завершению нашей работы. Осталось только дать понять браузеру как дочерние элементы должны отображаться в 3D-пространстве. Это свойство должно использоваться совместно со свойством transform и называется transform-style . Применить это свойство следует к блоку с классом.flipper , а не к.back и.front , иначе нас будет ожидать неприятный сюрприз в браузере Opera.
Flipper { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style:preserve-3d; transform-style: preserve-3d; }
Ура, у нас получилось. Мы только что научились делать поворот с помощью CSS . Что самое приятное, это поддерживают все современные браузеры. Да-да, пользователи в Internet Explorer также могут увидеть эту красоту начиная с 10 версии. К несчастью, в России сложилась порочная практика тащить за собой вереницу устаревших IE8 и IE9. Вот и мой клиент захотел чтобы в старых браузерах в момент наведения показывалась подсказка. Давайте посмотрим, что мы можем сделать.
Первое, что приходит в голову - воспользоваться директивой @supports . Мы могли бы записать:
@supports (transform-style: preserve-3d) or (-moz-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d) { /* стили для браузеров поддерживающих */ /* 3D преобразования */ }
Увы и ах, даже IE 11 ничего про нее не знает, поэтому воспользуемся старым дедовским способом:
В файде ie.css мы и опишем стили, необходимые для нашей подсказки. Я не буду приводить его здесь, т.к. он выходит за рамки данной статьи (да там и нет ничего интересного). Если хотите, можете увидеть его в нашем примере вертикального поворота с помощью CSS . Но что, если нас интересует поворот по-горизонтали? В этом случае наш код трансформируется так:
Vertical.flip-container { position: relative; } .vertical.flip-container .flipper { -webkit-transform-origin: 100% 213.5px; -moz-transform-origin: 100% 213.5px; -ms-transform-origin: 100% 213.5px; transform-origin: 100% 213.5px; } .vertical.flip-container:hover .back, .vertical.flip-container.hover .back { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); } .vertical .back, .vertical.flip-container:hover .front, .vertical.flip-container.hover .front { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); }
Вследствие того, что CSS развивается стремительными темпами и создавать анимацию стало еще проще без использования Javascript на многих сайтах появились очень интересные элементы, которыми нельзя не заинтересоваться. В сегодняшнем уроке мы посмотрим как можно создавать анимацию с помощью ключевых кадров (это еще интереснее чем просто с помощью CSS преобразований). Также наша анимация будет находится не просто в одной плоскости, а будет с эффектом 3D. Если вы не знаете для чего и где можно применить такой эффект — переходите в полную новость и там я вам об этом расскажу.
Если CSS преобразований из предыдущей серии уроков работали в браузерах Firefox, Chrome, Safari и Internet Explorer 10+, то в при создании 3D анимации она будет работать только в WebKit браузерах и браузере Mozilla. Самые простые преобразования будут работать и в IE10, но что-то более сложное — нет, так как этот браузер не поддерживает параметр preserve-3d для создания 3D слоев.
Анимация, которую мы создадим будет содержать в себе изображение, которое вращается вокруг оси Y:
Классно?!
Для тех, у кого нет анимации 😉 :
Всё понятно и просто в HTML структуре:
Что такое ключевые кадры?
В блоке @keyframes находится ряд правил, которые называются ключевыми кадрами. Ключевые кадры содержат свойства, которые применяются в определенный момент времени при анимации. При анимации значения интерполируются («плавно переходят» от одного значения к другому) и мы видим лишь плавный переход.
Вам это может показаться сложным, но это один из самых простых примеров.
Определим начальный и конечный ключевой кадр:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /* WebKit и Opera */ @-webkit-keyframes spinner { from { -webkit-transform : rotateY(0deg) ; } to { -webkit-transform : rotateY(-360deg) ; } } /* Все остальные браузеры */ @keyframes spinner { from { -moz-transform : rotateY(0deg) ; -ms-transform : rotateY(0deg) ; transform : rotateY(0deg) ; } to { -moz-transform : rotateY(-360deg) ; -ms-transform : rotateY(-360deg) ; transform : rotateY(-360deg) ; } } |
Кроме ключевых кадров нас также интересует @keyframes spinner , где мы указываем на что будем ссылаться при анимации позже, а именно на spinner .
Нам нужен элемент, в котором наша анимация обрела бы объем и появился эффект объема. Сцена, в отличие от вращающегося изображения, зафиксирована на странице.
Для сцены мы будем использовать новое для нас свойство perspective , которое придает глубину. Значение задается в пикселях. Оно определяет расстояние от пользователя до элементов в перспективе. Знаю, это сложно сразу понять 🙂 . Давайте уменьшим с 1200px до 300px и взгляните на результат ниже:
Классно?!
А также видео:
Сейчас вы увидите еще несколько новых свойств. И я даже не хочу вас сразу заставлять их запоминать сразу и разбираться в значениях. Можно поступить иначе: вы просто на них посмотрите и что поймете, то поймете. На самом деле, изучая дальше уроки вы будете встречать их часто и начнете понимать для чего они. Поэтому не волнуйтесь на счет того, что их много и вы не знаете и не понимаете что-то!
А свойства следующие:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | #spinner { width : 250px ; height : 290px ; background : url ("http://www..jpg" ) no-repeat ; text-align : center ; color : #fff ; margin : 0 auto ; -webkit-animation-name : spinner; -webkit-animation-timing-function : linear ; -webkit-animation-iteration-count : infinite; -webkit-animation-duration : 6s; animation-name : spinner; /* указываем на ключевые кадры анимации с названием "spinner" */ animation-timing-function : linear ; /* функция синхронизации, с помощью которой будут происходить преобразования */ animation-iteration-count : infinite; /* количество повторов анимации. "infinite" - значит бесконечно */ animation-duration : 6s; /* длительность анимации */ -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; transform-style : preserve-3d; /* указываем что это 3D преобразование */ } #spinner :hover { -webkit-animation-play-state : paused; animation-play-state : paused; /* останавливаем анимацию */ } |
Я подписал свойства без префиксов, потому что те выполняют аналогичные функции, только для других браузеров. Также хочу заметить что мы останавливаем анимацию с помощью специального свойства animation-play-state при наведении на изображение.
Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого . Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!
#axis:hover .move-right{
transform: translate(350px,0);
-webkit-transform: translate(350px,0); /** Chrome & Safari **/
-o-transform: translate(350px,0); /** Opera **/
-moz-transform: translate(350px,0); /** Firefox **/
}
Параметр transform
всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе.object.
Object {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
Это правило перемещение скажет браузеру анимировать все
параметры объекта на 2 секунды
(без задержки) с помощью функции ease-in-out.
Мы можем использовать 6 различных функций хронометража перемещений:
HTML
Создайте новый документ html и вставьте следующий код:
CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0);
- переместим объект влево.
#axis:hover .move-left {
transform: translate(-350px,0);
-webkit-transform: translate(-350px,0); /** Safari & Chrome **/
-o-transform: translate(-350px,0); /** Opera **/
-moz-transform: translate(-350px,0); /** Firefox **/
}
Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.
HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.
CSS
Так же как и грузовик, мы разместим ракету по центру:
.rocket {
top: 43%;
left: 44%;
}
Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.
#axis:hover .move-up {
transform: translate(0,-350px);
-webkit-transform: translate(0,-350px);
-o-transform: translate(0,-350px);
-moz-transform: translate(0,-350px);
}
HTML
CSS
#axis:hover .move-down {
transform: translate(0,350px);
-webkit-transform: translate(0,350px);
-o-transform: translate(0,350px);
-moz-transform: translate(0,350px);
}
HTML
CSS
#axis:hover .move-ne {
transform: translate(350px,-350px);
-webkit-transform: translate(350px,-350px);
-o-transform: translate(350px,-350px);
-moz-transform: translate(350px,-350px);
}
HTML
CSS
#axis:hover .rotate360cw {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
HTML
CSS
#axis:hover .rotate360ccw {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
}
Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого . Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!
#axis:hover .move-right{
transform: translate(350px,0);
-webkit-transform: translate(350px,0); /** Chrome & Safari **/
-o-transform: translate(350px,0); /** Opera **/
-moz-transform: translate(350px,0); /** Firefox **/
}
Параметр transform
всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе.object.
Object {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
Это правило перемещение скажет браузеру анимировать все
параметры объекта на 2 секунды
(без задержки) с помощью функции ease-in-out.
Мы можем использовать 6 различных функций хронометража перемещений:
HTML
Создайте новый документ html и вставьте следующий код:
CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0);
- переместим объект влево.
#axis:hover .move-left {
transform: translate(-350px,0);
-webkit-transform: translate(-350px,0); /** Safari & Chrome **/
-o-transform: translate(-350px,0); /** Opera **/
-moz-transform: translate(-350px,0); /** Firefox **/
}
Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.
HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.
CSS
Так же как и грузовик, мы разместим ракету по центру:
.rocket {
top: 43%;
left: 44%;
}
Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.
#axis:hover .move-up {
transform: translate(0,-350px);
-webkit-transform: translate(0,-350px);
-o-transform: translate(0,-350px);
-moz-transform: translate(0,-350px);
}
HTML
CSS
#axis:hover .move-down {
transform: translate(0,350px);
-webkit-transform: translate(0,350px);
-o-transform: translate(0,350px);
-moz-transform: translate(0,350px);
}
HTML
CSS
#axis:hover .move-ne {
transform: translate(350px,-350px);
-webkit-transform: translate(350px,-350px);
-o-transform: translate(350px,-350px);
-moz-transform: translate(350px,-350px);
}
HTML
CSS
#axis:hover .rotate360cw {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
HTML
CSS
#axis:hover .rotate360ccw {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
}