rotateY() в CSS

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 534076e19c349033 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

3D трансформации в CSS

Куб сделанный в 3D, видео урок — если понять как всё это работает и включить фантазию, то можно сверстать очень много самых разных прикольных штук.

Очень часто когда изучаешь что то новое, то получается быстро понять материал и приходят идеи где и как это применить.

Ну и думаю у многих бывает такое, что когда отходишь от темы на месяц-два, то потом всё забываешь и чтобы вспомнить и разобрать код нужно время.

В этой записи будут CSS свойства, которые как раз могут применяться время от времени и которые потом нужно вспоминать.

3D куб на CSS

Хочу показать вам шикарное видео, которое очень доступно объясняет ряд свойств и методов в CSS.

В видео — куб сделанный в 3D, и если понять как всё это работает и включить фантазию, то можно сверстать очень много самых разных прикольных штук

Список свойств из видео:

• perspective — создает 3D пространство для элементов
• transform-origin — определяет относительно какой точки элемент будет трансформироваться
• transform-style — сохраняет 3D пространство для дочерних элементов
• backface-visibility — отвечает за отображение обратной стороны элемента

Список методов для свойства transform:

• perspective — создает 3D пространство для одного элемента
• translateZ — двигает элемент по оси Z
• translate3d — сдвигает элемент по всем осям
• scaleZ — масштабирует ось Z
• scale3d — масштабирует элемент по всем осям
• rotateX — вращает элемент по оси X
• rotateY — вращает элемент по оси Y
• rotateZ — вращает элемент по оси Z

Функция rotate()

Функция rotate() свойства transform позволяет вращать элемент в 2D-пространстве. В скобках задается угол от 0 до 360 градусов. К числу дописывается приставка deg . Пример:

Если указано положительное число, поворот происходит по часовой стрелке, если отрицательное — против часовой. Если установлено значение 0deg , элемент останется в исходном положении. 360deg означает, что элемент совершит один полный оборот по часовой стрелке, 1080deg — три полных оборота, -720deg — два полных оборота против часовой стрелки и т. д.

Использовать полные обороты имеет смысл только в анимации. В противном случае какой-либо эффект от поворота будет незаметен, поскольку он будет происходить мгновенно и незаметно для глаз. Как оживить элемент, заставляя его вращаться плавно, будет показано далее в книге.

А пока несколько примеров статичных элементов, трансформированных с использованием функции вращения rotate() :

Функции для каждой оси

Свойство transform поддерживает дополнительные функции, которые позволяют совершать трансформации относительно осей трехмерного пространства:

• rotateX() — поворот элемента по оси X;
• rotateY() — поворот по оси Y;
• rotateZ() — поворот элемента по оси Z.

Точка вращения

Изначально поворот элемента происходит относительно его центральной оси. Но центр вращения можно изменить, воспользовавшись свойством transform-origin . В качестве значения указываются координаты для трех осей — X, Y и Z.

Единицы измерения для X и Y могут быть любыми. Также принимаются ключевые слова left , center , right (для X) и top , center , bottom (для Y). Для оси Z позволительно использовать корректные единицы измерения длины, кроме процентов.

По умолчанию настройки transform-origin следующие:

Данное свойство также требует использования префиксов производителей.

RotateY() в CSS

CSS3 позволяет вам форматировать ваши элементы, используя трехмерные трансформации.

В этом уроке вы узнаете о некоторых методах 3D трансформации:

Кликните на элементах ниже, чтобы увидеть разницу между 2D трансформацией и 3D трансформацией:

Поддержка Браузерами

Internet Explorer, Firefox и Opera пока еще не поддерживают методы трехмерного трансформирования.

Chrome и Safari требуют приставки -webkit-.

Метод rotateX()

С помощью метода rotateX() элемент поворачивается вокруг своей оси X на заданный угол.

Пример

Попробуйте сами »

Метод rotateY()

Посредством метода rotateY() элемент поворачивается вокруг своей оси Y на заданный угол.

Пример

Попробуйте сами »

Свойства Трансформации

Следующая таблица перечисляет все свойства трансформации:

CSS свойство transform

Определение и применение

CSS свойство transform применяет двухмерные или трехмерные трансформации к элементу (функции преобразования элемента). Допускается перечислять несколько функций в одном объявлении (разделённые пробелом).

Поддержка браузерами

Значения свойства

Подробное описание функции вы можете получить здесь(на русском), либо в оригинале — разделы 20 и 21. matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Определяет трехмерное преобразование с помощью матрицы 4×4 из шестнадцати значений в порядке столбцов. Все другие трехмерные функции преобразований основаны на функции matrix3d . Подробное описание функции вы можете получить здесь(на русском), либо в оригинале — разделы 20 и 21. translate(x,y) Определяет двухмерное преобразование путем сдвига элемента влево, вправо, вверх или вниз, используя координаты по оси x и y(отрицательные значения отвечают за сдвиг влево и вверх, положительные за сдвиг вправо и вниз). Элемент, к которому применяется сдвиг не влияет на поток документа. translate3d(x,y,z) Задает трехмерное преобразование путем сдвига элемента, используя координаты трёх осей. translateX(x) Определяет двухмерное преобразование путем сдвига элемента, используя только значение по оси x. translateY(y) Определяет двухмерное преобразование путем сдвига элемента, используя только значение по оси y. translateZ(z) Определяет трехмерное преобразование путем сдвига элемента, используя только значение по оси z. scale(x,y) Определяет двухмерное преобразование путем масштабирования элемента по оси x и по оси y. Допускается использование одного значения, в этом случае элемент масштабируется с указанным значением как по оси x, так и по оси y. К примеру, значение scale(0.5) уменьшит элемент в 2 раза (как по оси x, так и по y). Другими словами, значения больше одного при масштабировании увеличивают элемент, меньше одного — уменьшают. При использовании отрицательных значений элемент отображается зеркально. Масштабируемый элемент увеличивается, либо уменьшается относительно своего центра (допускается изменить исходную точку преобразования, установленную по умолчанию, задействовав свойство transform-origin ). scale3d(x,y,z) Определяет трехмерное преобразование путем масштабирования элемента по оси x, y и по оси z. scaleX(x) Определяет двухмерное преобразование путем масштабирования элемента, используя только значение по оси x. scaleY(y) Определяет двухмерное преобразование путем масштабирования элемента, используя только значение по оси y. scaleZ(z) Определяет трехмерное преобразование путем масштабирования элемента, используя только значение по оси z. rotate(angle) Задает двухмерный поворот по часовой стрелке, либо против часовой стрелки при использовании отрицательных значений. Элемент поворачивается относительно своего центра (допускается изменить исходную точку преобразования, установленную по умолчанию, задействовав свойство transform-origin ).

Допускается указывать значения угла в следующих единицах:

• deg — градусы. Оборот окружности составляет 360deg.
• grad — грады. Оборот окружности составляет 400grad.
• rad — радианы. Оборот окружности составляет 2π (

6.28rad).

Например, прямой угол составляет 90deg или 100grad или 0.25turn или примерно

1.57rad. rotate3d(x,y,z,angle) Задает трехмерный поворот по часовой стрелке, либо против часовой стрелки при использовании отрицательных значений. Элемент поворачивается под углом, задаваемым последним параметром относительно вектора направления. Первые три параметра определяют, вокруг какой из осей координат будет вращаться объект (x, y, z), а последний параметр определяет на сколько градусов. Значения X, Y и Z должны задаваться в виде чисел (соотношение углов). Например, rotate3d(2, 1, 0, 50deg) заставит объект повернуться на 50 градусов по оси X и на (50 * 1 / 2) градусов вокруг Y. rotateX(angle) Определяет трехмерное преобразование путем поворота элемента по часовой стрелке, либо против часовой стрелки (при использовании отрицательных значений), используя только значение по оси x. rotateY(angle) Определяет трехмерное преобразование путем поворота элемента по часовой стрелке, либо против часовой стрелки (при использовании отрицательных значений), используя только значение по оси y. rotateZ(angle) Определяет трехмерное преобразование путем поворота элемента по часовой стрелке, либо против часовой стрелки (при использовании отрицательных значений), используя только значение по оси z. skew(x-angle,y-angle) Определяет двухмерное преобразование путем наклона элемента относительно осей x и y. Допускается указывать только одно значение, в этом случае наклон элемента произойдет только по оси x. Элемент поворачивается относительно своего центра (допускается изменить исходную точку преобразования, установленную по умолчанию, задействовав свойство transform-origin ). При использовании отрицательных значений элемент будет наклоняться зеркально. skewX(angle) Определяет двухмерное преобразование путем наклона элемента относительно оси x. skewY(angle) Определяет двухмерное преобразование путем наклона элемента относительно оси y. perspective(n) Определяет перспективу обзора элемента, создавая для пользователя иллюзию глубины. Чем больше значение, указанное для функции перспективы, тем дальше от пользователя расположен элемент. Значение должно быть больше нуля. initial Устанавливает свойство в значение по умолчанию. inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

Наследуется

Анимируемое

Пример использования

Рассмотрим примеры двухмерных преобразований (трансформаций) в CSS:

Пример использования CSS свойства transform(двухмерная трансформация в CSS).

Рассмотрим примеры трехмерных преобразований (трансформаций) в CSS:

Пример использования CSS свойства transform(трехмерная трансформация в CSS).

Рассмотрим пример изменения двухмерного поворота элемента, используя CSS свойство transform , HTML атрибута событий onchange и функции на JavaScript:

Пример использования CSS свойства transform(двухмерный поворот элемента в CSS). CSS свойства

Трансформация элементов

Трансформация объектов доступна в таких дизайнерских программах, как Adobe Photoshop или Adobe Illustrator, причем существует в них в незапамятных времен. Как css-свойство transform появилось только в версии CSS3, и сразу же пришлось многим верстальщикам «по сердцу», особенно в паре со свойством transition, позволяющим назначать анимацию средствами css.

Свойство transform

CSS-свойство transform подразумевает использование одной или нескольких функций:

Масштабирование элемента — функция scale()

По умолчанию функция scale() имеет значение 1, т.е. transform: scale(1) — это нормальное состояние любого элемента. Поэтому при масштабировании объект обычно либо увеличивают scale(1.5) , либо уменьшают scale(.5) . Со значением -1 вы получите зеркальное отражение, причем по обеим осям.

Если масштабирование необходимо выполнить по одной из осей, можно использовать функцию scaleX(значение) или scaleY(значение):

Можно масштабировать элемент с разными пропорциями по оси X и Y сразу, указывая 2 значения через запятую в скобках:

Также часто применяют масштабирование элементов вместе с анимацией (так называемые hover-эффекты, или эффекты при наведении):

Как это выглядит на практике можно посмотреть в примере ниже:

Поворот rotate()

Для того чтобы повернуть элемент, необходимо использовать функцию rotate(угол). Угол можно указывать в нескольких единицах:

• В градусах ( deg) . Наиболее часто используемая единица измерения. Полный круг равен 360deg.
• В градах ( grad) . Полный круг равен 400grad,
• В радианах ( rad) . Полный круг равен 2π или примерно 6.2832rad.
• В поворотах ( turn) . Один круг равен одному повороту и пишется как 1turn. Отлично используется для анимации.

В коде использование этой функции будет выглядеть так:

Обратите внимание на последний пример: при повороте текст элемента поворачивается в ту же сторону, что и сам элемент. Если же текст нужно «вернуть на место», то для вложенного элемента нужно задать такой же угол поворота, но с отрицательным значением:

Скос элемента — функция skew()

В градусах (deg), градах (grad) или радианах (rad) также измеряется и скос, или искажение сторон, элемента. За это преобразование отвечает функция skew():

Как видно из кода, вы можете задать скос (или наклон) элемента либо одной цифрой (он будет выполнен по по оси X), либо двумя (первая — по оси X, вторая — по оси Y), или задать явно, по какой оси нужен скос, используя функции skewX или skewY.

Наглядная демонстрация использования трансформации скоса (наклона) в примере:

Смещение translate()

Очень удобное свойство, которое позволяет смещать элементы, которые не позиционированы абсолютно или относительно. В качестве аргументов можно указывать число в %, px, em, rem и т.п., причем как положительные, так и отрицательные. В случае использования % величина смещения берется от ширины или высоты элемента.

При использовании функции translate() с одним параметром смещение будет происходить по горизонтали (вправо — при положительных значениях, влево — при отрицательных значениях). Можно указать 2 параметра — тогда смещение будет и по горизонтали, и по вертикали одновременно. Для того чтобы сместить элемент по одной из осей, можно использовать функции translateX() или translateY() для горизонтального и вертикального смещения:

Перемещения и трансформации в CSS3

Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого. Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!

Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат.

Однако наша система координат имеет одну особенность: ось Y направлена в противоположную сторону, чем обычно. Почему? Дело в том, что HTML и CSS (наравне, например, с ActionScript) используют обратную систему координат, так как веб-страница начинается с левого верхнего угла и идет вниз.
Заметка: Мы будем полагать, что вы уже знакомы со структурой HTML и CSS. Я пропущу объяснения того, как настроить файл CSS, как разместить картинки и т.д. Мы сфокусируемся на анимировании изображений. Если вы не уверены в том, что ваши навыки на высоком уровне, то советуем взглянуть на курс уроков «HTML и CSS за 30 дней» (бесплатно и на английском языке), чтобы выучить все необходимое.

1: Горизонтальное перемещение

Первое перемещение, которое мы продемонстрируем — горизонтальное. Мы будем двигать объекты слева направо и справа налево.

Двигаемся вправо

Чтобы переместить объект мы будем использовать transform: translate(x,y), где X — положительное число, а Y=0.

HTML
Откройте ваш любимый редактор кода и введите следующее:

Мы определили три класса к картинке:

• object: Установление главных правил нашего объекта.
• van: Мы будем использовать различные объекты для демонстрации каждого вида анимации.
• move-right: Используя этот класс, мы будем двигать наш объект.

CSS
Во-первых, мы разместим наш объект (картинку грузовика) по центру.

В этом примере мы подвинем объект на 350px вправо. Использован синтаксис transform: translate(350px,0);. Кроме того объект будет двигаться только при наведении на него курсора: #axis:hover .move-right.

Параметр transform всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе .object.

Это правило перемещение скажет браузеру анимировать все параметры объекта на 2 секунды (без задержки) с помощью функции ease-in-out.
Мы можем использовать 6 различных функций хронометража перемещений:

• linear: перемещение происходит постоянной скоростью от начала и до конца.
• ease: перемещение начинается медленно и затем набирает скорость.
• ease-in: перемещение начинается медленно.
• ease-out: перемещение заканчивается медленно.
• ease-in-out: перемещение начинается и заканчивается медленно.
• cubic-bezier: ручное определение значения перемещения.

Посмотреть ДЕМО

Двигаемся влево

Чтобы переместить объект влево, нужно просто поставить отрицательное значение к оси ОХ, в то время как Y остается неизменным. В нашем случае мы переместим объект на —350px влево.

HTML
Создайте новый документ html и вставьте следующий код:

На этот раз мы используем класс move-left, чтобы переметить объект влево.

CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0); — переместим объект влево.

Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.
Посмотреть ДЕМО

2: Вертикальное перемещение

Перемещение объекта по вертикали не составит особого труда, ведь оно идентично горизонтальному. Единственная разница заключается в том, что мы будем иcпользовать значение -y для перемещения вверх и значение y для перемещения вниз.

Двигаемся вверх

HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.

CSS
Так же как и грузовик, мы разместим ракету по центру:

Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.

Двигаемся вниз

Как вы догадались, чтобы переместить объект вниз, координата Y должна быть положительной, а X равняться 0. Синтаксис: translate(0,y);

HTML

CSS

3: Диагональное перемещение

Чтобы переместить объект по диагонали, мы совместим параметры x и y. Синтаксис будет следующим: transform: translate(x,y). В зависимости от направления, значение x и y может быть как положительным, так и отрицательным.

HTML

CSS

4: Вращение

Вращение в CSS3 регулируется градусными координатами (от 0° до 360°). Чтобы повернуть объект, примените следущие параметры: transform: rotate(ndeg); где n — градусы.

Вращение по часовой стрелке

Для того чтобы повернуть объект по часовой стрелке, применим положительное значение для rotate(ndeg).

HTML

CSS

Вращение против часовой стрелки

Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg).

HTML

CSS

5: Масштабирование

Масштабирование — это интересная особенность CSS3. Используя параметр scale(n) или параметр scale(x,y), мы можем либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X — ширина, а Y — высота.
Давайте посмотрим на следующий пример.

HTML

CSS

6: Множественные движения

После того как мы рассмотрели основные движения и трансформации, мы можем попробовать комбинировать их.

HTML

CSS
План таков: нужно переместить бумеранг в правый верхний угол и одновременно вращать его. Для этого нужно просто перечислить команды через пробел.

rotateY()

The rotateY() function is used to rotate an element about the y-axis in three-dimensional space.

It is equivalent to:

Where rotate3d() is the transformation function used to rotate an element in three-dimensional space.

The following image shows the result of applying rotateY(50deg) and rotateY(-50deg) on an image:

The result of applying rotateY(50deg) and rotateY(-50deg) on an image

The official syntax looks as follows:

For a better understanding of the transform functions, please refer to the transform entry.

Browser Support

The following is the support table for three-dimensional CSS transforms:

CSS3 3D Transforms

Method of transforming an element in the third dimension using the `transform` property. Includes support for the `perspective` property to set the perspective in z-space and the `backface-visibility` property to toggle display of the reverse side of a 3D-transformed element.

Баг с rotateY() в CSS3?

Здравствуйте. Просто от нечего делать решил проексперементировать с трансформациями и столкнулся то-ли с багом, то-ли с незнанием почему так происходит. Суть собственно в том, что при указании perspective два соседних абсолютно одинаковых блока поворачиваются по-разному. Правильно работает только второй. Подскажите от чего может быть такой косяк?

• Вопрос задан более трёх лет назад
• 2359 просмотров

Я к сожалению не нашел ничего про то, как именно высчитывается размер элемента при этом, но внимательнее посмотрев предположил, что все из-за того, что элементы находятся на разной дистанции от правого края родителя, для которого указан собственно perspective.

Задумайтесь —а что такое перспектива? Потом прочтите про perspective-origin.

По умолчанию точка схождения горизонтальных линий прямоугольников лежит вполовину правее блока с perspective и посередине его высоты. именно так себя и ведут прямоугольники — их горизонтальные линии сходятся в этой точке. Никаких нарушений нет.

Про CSS

Transform

Css transform позволяет трансформировать элементы, в том числе в трехмерном пространстве.

Используя свойство transform можно задавать элементу одну и более функций для трансформации. Все функции можно найти тут: Transform Functions

Возможные значения: none или функции трансформаций через пробел.

Важно помнить, что функции применяются в той последовательности, в какой записаны, и предыдущие функции могут влиять на следующие. То есть строчки

дадут совершенно разный результат, а строчка:

повернет объект на 90 градусов, потому что обе функции будут выполнены последовательно.

Transform-origin

Свойство определяет центр трансформации.

Возможные значения: расстояния в пикселях или процентах или ключевые слова ( left , center , right , top , bottom ).

Исходное значение: 50% 50% — центр элемента.

Координаты отсчитываются от верхнего левого угла элемента. Если задано только одно значение, второе принимает значение center . Если задано два значения, третье принимает значение 0.

Transform-style

Определяет поддержку 3D внутри трансформируемого элемента.

flat — трансформируемый элемент плоский preserve-3d — трансформируемый элемент имеет внутренний объем

Следующие свойства могут перекрывать действие transform-style: preserve-3d; и делать отображение элемента плоским независимо от значения transform-style :

overflow с любым значением кроме visible opacity с любым значением кроме 1 (блокирует трехмерность, если задан обертке трансформируемого объекта, то есть уровнем выше, чем transform-style: preserve-3d; . На одном уровне они не мешают друг другу) так было на момент написания статьи, сейчас прозрачность делает трёхмерный элемент плоским. filter с любым значением кроме none

Perspective

Свойство определяет глубину сцены. Чем меньше значение, тем больше вытянута сцена в сторону зрителя. Задается родителю трансформируемых элементов.

Возможные значения: none или длина в пикселях.

Perspective-origin

Отвечает за расположение точки, от которой отсчитывается перспектива. По сути, задается положение зрителя относительно сцены.

Возможные значения: расстояния в пикселях или процентах или ключевые слова ( left , center , right , top , bottom ).

Backface-visibility

Определяет видимость задней стороны объекта.

Возможные значения: visible — объект виден всегда, вне зависимости от того, какой стороной повернут (значение по умолчанию). hidden — скрывать объект, если он повернут «спиной».