Содержание

2D трансформации. Вращение | CSS: Transform (трансформация объектов)

Вращение объекта на странице — без преувеличения одна из самых полезных функций при разработке анимаций и не только. Этот эффект, будучи простым в понимании, содержит некоторые хитрости, о которых не стоит забывать во время разработки шаблона.

Вращение объекта достигается путём использования функции rotate() свойства transform. В отличие от функции перемещения, вращение не может быть описано пикселями, процентами и другими привычными единицами измерения. Для вращения объекта используются специальные «угловые» единицы, среди которых:

  • deg — Градусы. Знакомая многим единица измерения, по которой можно указать, на какой угол повернуть объект относительно его начального положения .
  • grad — Градианы. Отличительной особенностью такой единицы является количество град на один квадрант — 100. То есть полный круг описывается в 400 град.
  • rad — Радианы.
    Мера, при которой за одну единицу принимается угол дуги, длина которой равна радиусу окружности.
  • turn — Оборот. Количество оборотов окружности, где единица равна одному полному обороту.

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


Важно: для вращения объекта по часовой стрелке используются положительные значения функции rotate()


Взгляните на наложение элементов. Изменив положение в пространстве, они не стали занимать «особое» положение в потоке документов. Для потока с этими элементами ничего и не случалось. То место, в котором они находились до трансформации всё так же зарезервировано и не занимается другими элементами. Это же пространство так же не изменяется вне зависимости от значений свойства

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

Как и с перемещением, функция rotate() не является единственной функцией для поворота элемента. Существует ещё несколько:

  • rotateX()
  • rotateY()
  • rotateZ()

Про rotateX() и похожие функции будет подробнее рассказано в темах, посвящённых 3D трансформациям. Работа двух других функций в двумерной области может поначалу запутать. Как это вращать объект только по одной оси? Ответ на этот вопрос будет ближе к концу урока. А сейчас стоит понять, как именно вращаются элементы и можно ли управлять точкой, вокруг которой и произойдёт вращение.

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

Если вы попробуете вращать любой HTML-элемент на странице, то cможете заметить, что браузер за точку вращения устанавливает центр элемента. Именно вокруг этой точки и происходит всё вращение. Это позволяет не выходить объекту за пределы своего изначального положения и является самым интуитивным способом. Скорее всего, мысленно, вы сможете перевернуть объект на 90 градусов по часовой стрелке и, ещё до трансформации, определить конечный результат преобразования.

В следующих примерах ось вращения будет обозначена тёмной точкой в квадрате. Следите за тем, как вращается элемент, но не поддавайтесь гипнозу 🙂

Используя CSS мы можем произвольно изменять точку, вокруг которой будет происходить вращение. Для этого используется свойство transform-origin, оно может принимать от одного до трёх значений одновременно. Третье значение отвечает за ось z, и к ней мы вернёмся во время изучения 3D трансформаций. Поведение при указании одного или двух значений следующее:

  • Одно значение: устанавливается точка по оси x. Значение по оси y будет равняться center.
  • Два значения: устанавливается точки по оси x и по оси y.

В качестве значений могут выступать проценты или специальные ключевые слова top, right, bottom, left, center. Добавим для квадрата из примера выше в качестве точки вращения левый верхний угол. Этого можно добиться двумя способами:

  • transform-origin: left top
  • transform-origin: 0% 0%

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

Обратите внимание на последний пример. В нём точка вращения вынесена за пределы самого объекта. Таким образом создаётся эффект, что объект перемещается не по определённой точке вращения, а вокруг неё. Попробуйте изменять значения, чтобы убедиться в понимании точки вращения объекта.

Вращение по одной оси

В самом начале урока говорилось о том, что существуют ещё две функции для вращения 2D объектов:

Как можно вращать двумерный объект по одной из осей? Добавим вращение по оси x на 360 градусов c точкой вращения по центру

Для большей наглядности на объекте используется градиент. Во время изучения трёхмерных объектов станет понятнее, что происходит с двумерным объектом. Он действительно крутится только по одной оси. В данном случае наклоняясь вперёд и проходя под осью

x. Это похоже на качели, которые раскручивают «солнышком», только мы не видим глубину объекта. Вращение по оси y работает по тому же принципу, только визуально объект будет вращаться вокруг вертикальной оси.

У двумерных объектов нет глубины, и именно поэтому визуально происходит скорее деформация объекта, чем его вращение. Такой принцип можно использовать при создании небольших анимаций. Например, используя :hover на кнопке можно изменить угол её положения относительно пользователя. Похожим приёмом можно добиться эффекта трёхмерности в двумерной плоскости. Подробнее об анимации будет в следующих курсах, но этот пример уже можно взять на вооружение для создания простых анимаций интерфейсов.

Дополнительное задание

Используя последний пример с кнопкой, попробуйте изученные свойства трансформации, чтобы увидеть, как будет вести себя объект при наведении. Скорость трансформации можно изменить в свойстве transition.

Полезные ссылки

Вращение — Tailwind CSS

​Основы использования

​Вращение элемента

Используйте утилиты rotate-{angle}, чтобы повернуть элемент.

<img>
<img>
<img>
<img>

​Использование отрицательных значений

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

<img>

​Удаление преобразований

To remove all of the transforms on an element at once, use the transform-none utility:

<div>
  
</div>

This can be useful when you want to remove transforms conditionally, such as on hover or at a particular breakpoint.

​Аппаратное ускорение

If your transition performs better when rendered by the GPU instead of the CPU, you can force hardware acceleration by adding the transform-gpu utility:

<div>
  
</div>

Use transform-cpu to force things back to the CPU if you need to undo this conditionally.


​Применяя условно

​Наведение, фокус и другие состояния

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:rotate-45 to only apply the rotate-45 utility on hover.

<div>
  
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

​Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:rotate-45 to apply the rotate-45 utility at only medium screen sizes and above.

<div>
  
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.


​Использование пользовательских значений

​Настройка вашей темы

По умолчанию Tailwind включает в себя несколько утилит общего назначения rotate. Вы можете настроить эти значения, отредактировав theme.rotate или theme.extend.rotate в вашем файле tailwind.config.js.

module.exports = {  theme: {    extend: {      rotate: {        '17': '17deg',      }    }  }}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

​Произвольные значения

If you need to use a one-off rotate value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div>
  
</div>

Learn more about arbitrary value support in the arbitrary values documentation.

вращение css opengl (1) — Code Examples


c++ — Быстрый алгоритм вращения плоскости?

Я работаю над приложением, которое обнаруживает самый видный прямоугольник в изображении, а затем пытается повернуть его так, чтобы нижняя левая часть прямоугольника располагалась в начале координат,…




c++ — Вращение точки вокруг другой точки(2D)

Я пытаюсь сделать карточную игру, в которой карты разгоняются. Прямо сейчас, чтобы отобразить его Im, используя Allegro API, который имеет функцию: al_draw_rotated_bitmap(OBJECT_TO_ROTATE,CENTER_X,…




flip svg система координат

Есть ли способ перевернуть систему координат SVG, чтобы[0,0] находился в левом нижнем углу, а не в левом верхнем углу?…



jquery — Вращение элемента анимации

Как я могу повернуть элемент с помощью.animate() jQuery? Я использую приведенную ниже строку, которая в настоящее время правильно анимирует непрозрачность, но поддерживает ли это CSS3-преобразовани…


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

Как повернуть элемент относительно определенной точки, то есть определенной координаты x & y в CSS(webkit)? Обычно вращение делает центральную точку элемента справочной.…




Создание анимации вращения элемента средствами CSS

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

Сегодня мы рассмотрим вращение объектов вокруг своей оси. Особенность предлагаемых нами анимаций заключается в том, что вращение будет построено исключительно на правилах CSS, без использования JavaScript-кода.

Вращение двухмерных элементов

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

HTML

<div>
    <div>
        <img alt="Landing page"
 src="/sites/all/themes/mytheme/css/uslugi/uslugi/type1.png">
        <img alt="Landing page"
 src="/sites/all/themes/mytheme/css/uslugi/uslugi/type1h.png">
    </div>
</div>

CSS

.frompic {
    position: relative;
    display:inline-block;
    vertizl-align:top;
    width: 200px;
    height: 200px;
    /* определение глубины поворота */
    -webkit-perspective: 600px; /* webkit */
    -moz-perspective: 600px; /* mozilla */
    -ms-perspective: 600px; /* IE 10 */
    -o-perspective: 600px; /* opera */
    perspective: 600px; /* стандартное указание свойства */
 
}
.block {
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -ms-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    transition: transform 0.5s; /* продолжительность поворота */
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;   
}
.block:hover {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -ms-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}
.frompic img {
    position: absolute;
    display:block;
    top: 0px;
    left: 0px;
    width: 200px;
    height: 200px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;    /* скрытия контента элемента
 после поворота */
}
.frompic {
    left:0px;
}
.img2 {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );   /* устанавливаем начальное
 положение задней стороны */
}

После корректного переноса этого кода в документ получим следующий результат

Вращение трехмерных элементов

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

Код для поворота объемного элемента приведен здесь.

HTML

<div>
<div>
	<figure></figure>
	<figure></figure>
	<figure></figure>
	<figure></figure>
	<figure></figure>
</div>
</div>

CSS

.container {
	margin: 100px auto auto 100px;
	position: relative;
	width: 226px;
	height: 316px;
	/* задаем глубину сцене */
	-webkit-perspective: 600px; /* webkit */
	-moz-perspective: 600px; /* mozilla */
	-ms-perspective: 600px; /* IE 10 */
	-o-perspective: 600px; /* opera когда-то
 тоже должна начать понимать */
	perspective: 600px;	/* св-во по стандартам */
}
 
#book { /* поварачивать будет общий контейнер */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
 
	-webkit-transition: -webkit-transform 1.5s;
	-moz-transition: -moz-transform 1.5s;
	-ms-transition: -moz-transform 1.5s;
	-o-transition: -o-transform 1.5s;
	transition: transform 1.5s; /* трансформации будут происходить
 анимированно продолжительностью 0.5 сек */
 
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;/* указываем, что дочерние
 элементы находятся в 3D пространстве */
 
}
#book.flip {	/* добавляя этот класс, поворачиваем
 контейнер на 180 градусов */
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY( 180deg );
	-o-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}
 
figure {
	position: absolute;
	display: block;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;	/* если элемент отвернут лицом
 от пользователя, контент этого элемента не виден */
}
.back, .front, .left-1, .left-2, .right {
	background: url(book-texture.jpg);
}
.front {
	width: 100%;
	height: 100%;
	background-position: -276px 0;
	-webkit-transform: rotateY( 0deg ) translateZ(  25px );
	-moz-transform: rotateY( 0deg ) translateZ(  25px );
	-ms-transform: rotateY(0deg) translateZ(  25px );
	-o-transform: rotateY( 0deg ) translateZ(  25px );
	transform: rotateY( 0deg ) translateZ(  25px );
	/* rotateY - поворачиваем грань на нужный угол
 translateZ - т.к. объект имеет толщину*/
}
.back {
	width: 100%;
	height: 100%;
	-webkit-transform: rotateY( 180deg ) translateZ(  25px );
	-moz-transform: rotateY( 180deg ) translateZ(  25px );
	-ms-transform: rotateY(180deg) translateZ(  25px );
	-o-transform: rotateY( 180deg ) translateZ(  25px );
	transform: rotateY( 180deg ) translateZ(  25px );
}
 
/*придаем выпуклости торцу разбиваем его на две 
части и ставим их под небольшим углом друг к другу*/
 
.left-1 {
	background-position: -250px 0;
	width: 28.5px;
	height: 100%;
	-webkit-transform: rotateY( -70deg ) translate3d(-3px, 0, 8px );
	-moz-transform: rotateY( -70deg ) translate3d(-3px, 0, 8px );
	-ms-transform: rotateY(-70deg) translate3d( -3px, 0, 8px );
	-o-transform: rotateY( -70deg ) translate3d( -3px, 0, 8px );
	transform: rotateY( -70deg ) translate3d( -3px, 0, 8px ); 
        -webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-ms-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center; /* поворачиваю торцы вокруг их
 левой границы: так проще потом расположить элемент (в данном случае) */
}
.left-2 {
	background-position: -225px 0;
	width: 28px;
	height: 100%;
	-webkit-transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px );
	-moz-transform: rotateY( -110deg ) translate3d(  -24.5px, 0, 8px );
	-ms-transform: rotateY(-110deg) translate3d( -24.5px, 0, 8px );
	-o-transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px );
	transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px );
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-ms-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}
 
.right {
	background-position: -276px 0;
	width: 50px;
	height: 100%;
	-webkit-transform: rotateY( 90deg );
	-moz-transform: rotateY( 90deg );
	-ms-transform: rotateY(90deg);
	-o-transform: rotateY( 90deg );
	transform: rotateY( 90deg );
	top: 0;
	right: 0;
}

После корректного переноса этого кода в документ получим следующий результат

В каких браузерах работает?
10.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+

Оценок: 8 (средняя 5 из 5)

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

CSS анимация с помощью ключевых кадров

Вследствие того, что CSS развивается стремительными темпами и создавать анимацию стало еще проще без использования Javascript на многих сайтах появились очень интересные элементы, которыми нельзя не заинтересоваться. В сегодняшнем уроке мы посмотрим как можно создавать анимацию с помощью ключевых кадров (это еще интереснее чем просто с помощью CSS преобразований). Также наша анимация будет находится не просто в одной плоскости, а будет с эффектом 3D. Если вы не знаете для чего и где можно применить такой эффект — переходите в полную новость и там я вам об этом расскажу.

Сегодня мы идем дальше в изучении CSS анимации. Поэтому рекомендую изучить предыдущие уроки «Анимация с помощью CSS преобразований» (эта анимация значительно проще, а изучив ее — здесь вы также с легкостью всё поймете 🙂 ):

Если CSS преобразований из предыдущей серии уроков работали в браузерах Firefox, Chrome, Safari и Internet Explorer 10+, то в при создании 3D анимации она будет работать только в WebKit браузерах и браузере Mozilla. Самые простые преобразования будут работать и в IE10, но что-то более сложное — нет, так как этот браузер не поддерживает параметр preserve-3d для создания 3D слоев.

Анимация CSS

Анимация, которую мы создадим будет содержать в себе изображение, которое вращается вокруг оси Y:

Для тех, у кого нет анимации 😉 :

Немного HTML

Всё понятно и просто в HTML структуре:

1
2
3
<div> 
    <p>Классно?!</p>
</div>

Ключевые кадры CSS

Что такое ключевые кадры?

В блоке @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('https://sitehere.ru/wp-content/uploads/2014/10/baby-l1.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 при наведении на изображение.

Вывод

Возможно и сейчас кто-нибудь может сказать «А где же я на своём сайте могу применить этот эффект?». Первое что пришло мне в голову — это оповещение о каком-либо событии. Согласитесь, когда что-то вращается, да еще и так красиво, оно обязательно привлечет внимание!

Вы можете изменить вращение, редактируя градусы в ключевых кадрах и удивляться как это легко и, в это же время, очень красиво.

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


Успехов!

С Уважением, Юрий Немец

Как сделать анимацию вращения в css

Вращение картинки по кругу на css

Как заставить её вращаться по кругу на одном месте по часовой стрелке — в положении 180 градусов смайл становится перевернутым) желательно на css ?

Анимация по шагам))

Можно воспользоваться свойством animation

Которому можно задать анимацию, описанную в @keyframes, а так же настройки анимации: продолжительной одной итерации, задержка перед запуском, количество повторений и т.д.

Анимация вращения при наведении курсора

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками html css jquery css3 анимация или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Анимация вращения на CSS

Хочу сделать такую же анимацию вращения с помощью CSS, но у меня получается она только в одну сторону.

Как сделать, чтобы она вращалась от 60deg до -60deg и плавно возвращалась от -60deg до 60deg?

Вам поможет @keyframes , так же я добавил переменную для значения угла.

Немного не то, что просил автор, но мне показалось, что интересно выглядит.

Анимация наклона головы начинается по наведению мышки.

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками css веб-программирование или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Бесконечная анимация вращения на CSS

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

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

Первым делом, добавляем наше изображение на страницу:

После этого, прописываем такой CSS код:

Итак, теперь немного пояснения значений CSS свойств для тега img.
animation-name – мы задали имя анимации, в нашем случае это «rotation»;
animation-duration &#8212; время в секундах, за которое происходит цикл вращения;
animation-iteration-count – количество повторений, в нашем случае – бесконечно;
animation-timing-function – тип анимации, в нашем случае линейный (равномерный) – «linear»;

Теперь самое время прописать саму анимацию:

Здесь, как вы, наверное, уже смогли догадаться заданы ключевые кадры анимации «rotation». Положение элемента на начальном этапе цикла (0%) указано 0 градусов, положение на конечном этапе цикла (100%) &#8212; 360 градусов. Таким образом анимация вращения будет происходить от 0 до 360 градусов, далее цикл будет повторяться. Всё довольно просто не так ли.

А вот полный CSS-код, особенность его в том, что здесь сделано для учета особенностей всех браузеров:

CSS — rotate — Свойство CSS rotate позволяет указывать преобразования поворота индивидуально и

Свойство CSS rotate позволяет указывать преобразования поворота индивидуально и независимо от свойства transform . Это лучше соответствует типичному использованию пользовательского интерфейса и избавляет от необходимости помнить точный порядок функций преобразования, указываемых в свойстве transform .




Syntax

rotate: none;


rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;


rotate: x 90deg;
rotate: y 0.25turn;
rotate: z 1.57rad;


rotate: 1 1 1 90deg;


rotate: inherit;
rotate: initial;
rotate: revert;
rotate: unset;

Values

angle value

<angle> задать угол , чтобы повернуть пораженный элемент через, вокруг оси Z. Эквивалент функции rotate() (2D вращение).

название оси x,y или z плюс значение угла

Имя оси, вокруг которой вы хотите повернуть соответствующий элемент ( "x" , « y » или « z" ), а также <angle> , указывающий угол, на который необходимо повернуть элемент. Эквивалент функции rotateX() / rotateY() / rotateZ() (вращение 3D).

вектор плюс угловое значение

Три <number> представляющие вектор, ориентированный на начало координат, который определяет линию, вокруг которой вы хотите повернуть элемент, плюс <angle> указывающий угол, на который нужно повернуть элемент. Эквивалент функции rotate3d() (вращение 3D).

none

Указывает,что вращение не должно применяться.

Formal definition

Формальный синтаксис

none | <angle> | [ x | y | z | <number>{3} ] && <angle>

Examples

Поворот элемента при наведении

HTML
<div>
  <p>Rotation</p>
</div>
CSS
* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  border-radius: 20px;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.rotate {
  transition: rotate 1s;
}

div:hover .rotate {
  rotate: 1 -0.5 1 180deg;
}
Result

Specifications

Совместимость с браузерами

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Хромовый Android Firefox для Android Опера Андроид Safari на IOS Samsung Интернет
rotate

No

No

72

60-72

No

No

14.1

No

No

79

60-79

No

14.5

No

x_y_z_angle

No

No

72

65-72

No

No

No

No

No

65

No

No

No

См.также

Примечание: skew не является независимым значением transform

rotate — CSS: каскадные таблицы стилей

CSS-свойство rotate позволяет задавать преобразования поворота индивидуально и независимо от свойства transform . Это лучше соответствует типичному использованию пользовательского интерфейса и избавляет от необходимости запоминать точный порядок функций преобразования, которые необходимо указать в свойстве преобразования .

 
вращать: нет;


поворот: 90 градусов;
повернуть: 0,25 оборота;
вращение: 1,57 рад;


повернуть: х 90 градусов;
повернуть: у 0.25поворот;
повернуть: z 1,57 рад;


повернуть: 1 1 1 90 градусов;


повернуть: наследовать;
повернуть: начальный;
повернуть: вернуться;
повернуть: не установлено;
  

Значения

Значение угла

<угол> , указывающий угол поворота затронутого элемента вокруг оси Z. Эквивалент функции rotate() (2D-вращение).

Имя оси x, y или z плюс значение угла

Имя оси, вокруг которой вы хотите повернуть затронутый элемент ( "x" , « y » или « z" ), плюс <угол> , указывающий угол поворота элемента. .Эквивалент функции rotateX() / rotateY() / rotateZ() (трехмерное вращение).

вектор плюс значение угла

Три <число> , представляющие вектор с центром в начале координат, который определяет линию, вокруг которой вы хотите повернуть элемент, плюс <угол> , указывающий угол, на который нужно повернуть элемент. Эквивалент функции rotate3d() (трехмерное вращение).

нет

Указывает, что поворот не применяется.

Поворот элемента при наведении

HTML
  <дел>
  

Вращение

УСБ
  * {
  box-sizing: граница-коробка;
}

HTML {
  семейство шрифтов: без засечек;
}

дел {
  ширина: 150 пикселей;
  поле: 0 авто;
}

п {
  отступ: 10px 5px;
  граница: 3 пикселя, сплошной черный цвет;
  радиус границы: 20px;
  ширина: 150 пикселей;
  размер шрифта: 1.2rem;
  выравнивание текста: по центру;
}

.повернуть {
  переход: повернуть 1с;
}

div: наведите курсор .rotate {
  повернуть: 1 -0.5 1 180 градусов;
}
  
Результат

BCD Столы только нагрузки в браузер

Примечание: SKEW не является независимым преобразование Значение

ROTATE — Tailwind CSS

Базовое использование

Вращающийся элемент

Использование Votate {angle} утилит для поворота элемента.

  
<изображение>
<изображение>
  

​Использование отрицательных значений

Чтобы использовать отрицательное значение поворота, поставьте перед именем класса тире, чтобы преобразовать его в отрицательное значение.

    

Удаление преобразований

Чтобы удалить сразу все преобразования элемента, используйте утилиту transform-none :

  

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

​Аппаратное ускорение

Если ваш переход работает лучше при рендеринге с помощью графического процессора, а не центрального процессора, вы можете принудительно ускорить аппаратное ускорение, добавив утилиту transform-gpu :

  

Используйте transform-cpu для принудительного возврата к ЦП, если вам нужно отменить это условно.


​Условное применение

​Наведение, фокус и другие состояния

Tailwind позволяет вам условно применять служебные классы в различных состояниях с помощью модификаторов вариантов. Например, используйте hover:rotate-45 , чтобы применить утилиту rotate-45 только при наведении.

  <дел>
  

Полный список всех доступных модификаторов состояния см. в документации Hover, Focus и других состояний.

​Точки останова и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга медиа-запросов, таких как чувствительные точки останова, темный режим, предпочтения с уменьшенным движением и т. д.Например, используйте md:rotate-45 , чтобы применить утилиту rotate-45 только к экранам среднего размера и выше.

  <дел>