Вращение css: Бесконечная анимация CSS — Stack Overflow на русском

Содержание

CSS перемещение, вращение, 3D

Здравствуйте уважаемые начинающие веб-мастера.

Редкая анимация обходится без свойства transform. Давайте подробно рассмотрим все возможности этого удивительного инструмента CSS, для чего и как он применяется.

Все последующие примеры будут работать при наведении курсора, чтобы Вы могли посмотреть действие свойства transform

За основу возьмём блок <div> прямоугольной формы.

HTML:<div></div>
CSS:
.div {
width: 150px;
height: 100px;
border: 2px solid #333;
border-radius: 5px;
background: #463E48;
}

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

Уменьшение — увеличение

а) transform: scale(0.5); — масштабирует элемент по горизонтали и вертикали. Число больше единицы увеличивает; элемент, а меньше единицы — уменьшает.

б) transform: scaleX(0.5); — масштабирует элемент по горизонтали;

в) transform: scaleY(0.5); — масштабирует элемент по вертикали;

Наклоны

а) transform: skewX(30deg); — наклоняет элемент на заданный угол по вертикали (в данном случае на 30°). Отрцательное значение наклоняет элемент в другую сторону;

б) transform: skewY(30deg); — наклоняет элемент на заданный угол по горизонтали;

Перемещение

а) transform: translate(50px); — сдвигает элемент на заданное значение по горизонтали и вертикали;

б) transform: translateX(50px); — сдвигает элемент по горизонтали. Положительное значение сдвигает вправо, отрицательное влево.

в) transform: translateY(50px); — сдвигает элемент по вертикали. Положительное значение сдвигает вниз, отрицательное значение вверх;

Вращение

а) transform: rotate(45deg); — поворот элемента вокруг центра (по умолчанию) на заданный угол;

б) transform: rotateY(360deg); — поворот элемента вокруг вертикальной оси. Применяется в 3D и об этом ниже;

в) transform: rotateX(360deg); — поворот элемента вокруг горизонтальной оси. Применяется в 3D;

Отражение

transform: matrix(); — создаёт эффект отражения элемента.

Для эффекта отражения в <div> добавляются два изображения, одно из которых будет отражением другого.

HTML: <div><img src="images/makak.jpg" alt=""><br>
<img src="images/makak.jpg" alt="">
 </div>
CSS:
 .reflect {
transform: matrix(1, 0, 0, -1, 0, 0);
opacity: 0.5;
}

Вид отражения можно менять изменяя комбинацию первых четырёх цифр меняя их от 1 до -1. Пятая цифра двигает элемент по оси Х, шестая по оси Y.

3D

transform-style: preserve-3d; — создаёт 3D эффект.

HTML <div> <div></div> </div> CSS /*Создаём бокс для двух элементов*/ .main-box { width: 100px; height: 100px; border: 2px solid #463E48; /* Подключаем свойство transform-style для 3D */ transform-style: preserve-3d; /* Подключаем анимацию для вращения и обзора */

animation: main-rotate 10s infinite linear;
}
/* Наружний квадрат */
.outer {
position: absolute;
width: 100px;
height: 100px;
/* Прозрачность для лучшего визуального восприятия */
opacity: 0.7;
}
/*Внутренний квадрат*/
.interior {
/* Отодвигаем внурь и уменьшаем масштаб */
transform: translateZ(-5em) scale(0.8);
background: #463E48;
}
/* Анимация вращение вокруг вертикальной оси*/
@keyframes main-rotate {
100% {
transform: rotateY(360deg);
}
}

Точка координат

transform-origin: x y z; — задаёт координаты точки относительно центра, вокруг которой будет вращаться элемент.

В плоскости используются два значения (x y), в 3D три значения (x y z)

Вот примерно так всё и делается.

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

Например: элемент будет постепенно наклоняться в течении анимации

@keyframes main-rotate { 0% { transform: skewY(0); } 100% { transform: skewY(30deg); }

Желаю творческих успехов.

rotate() — CSS | MDN

Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством transform-origin (en-US), не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется

точечным отражением.

a: Является <angle>, представляющим угол поворота. Положительный угол обозначает вращение по часовой стрелке, а отрицательный — против часовой стрелки.

Декартовы координаты на ℝ²	Однородные координаты на ℝℙ²	Декартовы координаты на ℝ³	Однородные координаты на ℝℙ³
cos(a)-sin(a)sin(a)cos(a)	cos(a)-sin(a)0sin(a)cos(a)0001	cos(a)-sin(a)0sin(a)cos(a)0001	cos(a)-sin(a)00sin(a)cos(a)0000100001
cos(a)-sin(a)sin(a)cos(a)	`[cos(a) sin(a) -sin(a) cos(a) 0 0]`	cos(a)-sin(a)0sin(a)cos(a)0001	cos(a)-sin(a)00sin(a)cos(a)0000100001

Базовый пример

HTML

<div>Normal</div>
<div>Rotated</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); 
  background-color: pink;
}

Result

Объединение вращения с другим преобразованием

Если вы хотите применить к элементу несколько преобразований, будьте осторожны с порядком, в котором вы указываете свои преобразования. Например, если вы вращаете перед сдвигом, сдвиг произойдёт относительно новой оси вращения!

HTML

<div>Normal</div>
<div>Rotated</div>
<div>Rotated + Translated</div>
<div>Translated + Rotated</div>

CSS

div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}

Result

BCD tables only load in the browser

вращение » Скрипты для сайтов

14.05.2020 1 397 Codepen

Сверкающие круги из частиц

Вращающиеся сверкающие круги из частиц на канвасе

15.01.2019 3 794 Codepen

Вращение текста по кругу в 3D пространстве

Вращающийся текст в 3D пространстве канваса созданного Three.js.

01.10.2018 1 901 Codepen

Прелоадер летающие кометы

Загрузчик на сайт в виде двух летающих комет

27.03.2018 1 156 Codepen

Плазменные круги

Вращающиеся кружки… много вращающихся кружков. Сделано на чистом CSS.

30.01.2018 1 476 Codepen

Планета с астероидами

Анимация движения планеты в открытом космосе с астероидами реализованная на three.js

14.12.2015 4 356 Скрипты / Text

Ротация текста — atrotating.js

Atrotating — плагин для изменения/вращения текста или HTML, одиночно или в группе, автоматически с сепаратором (вертикальной чертой «|»). Плагин поставляется с пятью встроенными эффектами перехода, но вы также можете подключить animate.css для использования более необычных css3 анимаций.

22.04.2013 7 141 Скрипты / Slider

Three sixty — поворот изображения на 360°

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

09.07.2012 4 531 Скрипты / Slider

3D анимация вращения куба

Сегодня будет создавать 3D анимацию вращения используя css3 3d transform и css3 animation без использования jаvascript.

21.05.2012 3 906 Скрипты / Animation

Эффект вращающегося куба

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

02.04.2012 2 501 Скрипты / Gallery

Диагональное вращение изображений

Превратим неупорядоченный список во вращающееся диагональное портфолио из изображений с помощью CSS3 и jQuery.

30.08.2011 2 205 Скрипты / Buttons

Вращающиеся иконки

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

Как использовать функции 2D-преобразования в CSS

Ниже приводится краткий отрывок из новой книги Тиффани «Мастер CSS, 2-е издание».

Преобразования позволяют нам создавать эффекты и взаимодействия, которые иначе были бы невозможны. В сочетании с переходами и анимацией мы можем создавать элементы и интерфейсы, которые вращаются, танцуют и масштабируются. В частности, трехмерные преобразования позволяют имитировать физические объекты. В этой части мы рассмотрим функции 2D-преобразования (3D-функции описаны здесь).

Существует четыре основных функции двумерного преобразования: повернуть , масштаб , наклон и перевести . Шесть других функций позволяют преобразовать элемент в одномерном измерении: scaleX и scaleY ; skewX и skewY ; и translateX и translateY .

повернуть ()

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

Функция rotate () принимает значения в угловых единицах. Угловые единицы определяются уровнем модуля 3 значений и единиц измерения CSS. Это могут быть град, (градусы), рад, (радианы), град, (градианы) или град, единиц. Один полный оборот равен 360 градусов , 6.28рад , 400град или 1 оборот .

Значения поворота, превышающие один оборот (скажем, 540deg или 1.5turn ), отображаются в соответствии с их остаточным значением, если они не анимированы или не изменены. Другими словами, 540deg отображается так же, как 180deg (540 градусов минус 360 градусов), а 1.5turn отображается так же, как .5turn (1.5 — 1). Но переход или анимация с 0deg на 540deg или 1 повернуть на 1.5turn повернет элемент полтора раза.

Функции масштабирования

2D: масштаб

, масштаб X и масштаб Y

С помощью функций масштабирования мы можем увеличивать или уменьшать отображаемый размер элемента в X-измерении ( scaleX ), Y-измерении ( scaleY ) или обоих ( scale ). Масштабирование показано ниже, где граница показывает исходные границы блока, а знак + отмечает его центральную точку.

Каждая функция масштабирования принимает в качестве аргумента множитель или коэффициент.Этот множитель может быть любым положительным или отрицательным числом. Значения процентов не поддерживаются. Положительные множители, превышающие 1 , увеличивают размер элемента. Например, масштаб (1.5) увеличивает размер элемента в направлениях X и Y в 1,5 раза. Положительные множители между 0 и 1 уменьшают размер элемента.

Значения меньше 0 также приведут к увеличению или уменьшению размера элемента и созданию преобразования отражения (отражения).

Предупреждение. Использование шкалы (0) приведет к исчезновению элемента, потому что умножение числа на ноль дает нулевое произведение.

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

Можно масштабировать размеры X и Y отдельно, используя функцию scale . Просто передайте ему два аргумента: масштаб (1,5, 2) . Первый аргумент масштабирует X-измерение; второй масштабирует Y-размер. Мы могли бы, например, отразить объект только по оси X, используя масштаб (-1, 1) . При передаче одного аргумента оба измерения масштабируются с одинаковым коэффициентом.

Функции перевода

2D:

translateX , translateY и translate

При смещении элемента его нарисованная позиция смещается от позиции макета на указанное расстояние.Как и в случае с другими преобразованиями, перенос элемента не изменяет его положение offsetLeft или offsetTop . Однако это влияет на его визуальное расположение на экране.

Каждая функция двухмерного преобразования — translateX , translateY и translate — принимает длину или процентное соотношение аргументов. Единицы длины включают пиксели ( пикселей, ), em , rem и единицы области просмотра ( vw и vh ).

Функция translateX изменяет горизонтальную позицию рендеринга элемента. Если элемент позиционируется на ноль пикселей слева, transform: transitionX (50px) сдвигает его позицию рендеринга на 50 пикселей вправо от его начальной позиции. Точно так же translateY изменяет вертикальную позицию рендеринга элемента. Преобразование transform: transitionY (50px) смещает элемент по вертикали на 50 пикселей.

С помощью translate () мы можем перемещать элемент по вертикали и горизонтали с помощью одной функции.Он принимает до двух аргументов: значение перевода X и значение перевода Y. На рисунке ниже показан эффект элемента со значением transform , равным translate (120%, -50px) , где левый зеленый квадрат находится в исходном положении, а правый зеленый квадрат перемещен на 120% по горизонтали и — 50 пикселей по вертикали от содержащего его элемента (пунктирная граница).

Передача одного аргумента в translate эквивалентна использованию translateX ; значение трансляции Y будет установлено на 0 .Использование translate () — более лаконичный вариант. Применение translate (100px, 200px) эквивалентно translateX (100px) translateY (200px) .

Положительные значения смещения перемещают элемент вправо (для translateX ) или вниз (для translateY ). Отрицательные значения перемещают элемент влево ( translateX ) или вверх ( translateY ).

Переводы особенно хороши для перемещения элементов влево, вправо, вверх или вниз.Обновление значения свойств left , right , top и bottom заставляет браузер пересчитывать информацию о макете для всего документа. Но преобразования вычисляются через после расчета макета. Они влияют на то, где элементы появляются на экране , но не на их фактические размеры. Да, странно рассматривать макет документа и визуализацию как отдельные концепции, но с точки зрения браузеров это так.

Свойства преобразования могут появиться в браузере рядом с вами

Последняя версия спецификации CSS Transforms добавляет translate , rotate и scale properties to CSS.Свойства преобразования работают так же, как соответствующие им функции преобразования, но значения разделяются пробелами, а не запятыми. Мы могли бы, например, выразить transform: rotate3d (1, 1, 1, 45deg) , используя свойство rotate : rotate: 1 1 1 45deg . Аналогично, translate: 15% 10% 300px визуально совпадает с transform: translate3d (15%, 10%, 300px) и scale: 1.5 1.5 3 совпадает с transform: scale3d (1.5, 1 .5, 3) . С помощью этих свойств мы можем управлять преобразованиями поворота, перемещения или масштабирования отдельно от других преобразований.

На момент написания, браузерная поддержка свойств преобразования все еще была довольно скудной. Chrome и Samsung Internet поддерживают их из коробки. В Firefox версии 60 и новее поддержка скрыта за флажком; посетите about: config и установите layout.css.individual-transform.enabled на true .

перекос , перекос X и перекос

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

Функции перекоса — skew , skewX и skewY — принимают большинство угловых единиц в качестве аргументов. Градусы, градианы и радианы являются допустимыми единицами измерения угла для функций перекоса, тогда как единицы поворота, возможно, очевидно, нет.

Функция skewX срезает элемент по оси X или по горизонтали (см. Изображение ниже).Он принимает один параметр, который, опять же, должен быть угловой единицей. Положительные значения сдвигают элемент влево, а отрицательные значения — вправо.

Аналогично, skewY срезает элемент в Y или вертикальном направлении. На изображении ниже показан эффект преобразования : skewY (30deg) . Точки справа от начала координат смещаются вниз с положительными значениями. Отрицательные значения сдвигают эти точки вверх.

Это подводит нас к функции skew .Функция skew требует одного аргумента, но принимает до двух. Первый аргумент наклоняет элемент в направлении X, а второй — в направлении Y. Если указан только один аргумент, предполагается, что второе значение равно нулю, что эквивалентно перекосу только в направлении X. Другими словами, skew (45deg) отображает то же, что и skewX (45deg) .

Матрица преобразования тока

До сих пор мы обсуждали функции преобразования отдельно, но их также можно комбинировать.Хотите масштабировать и вращать объект? Нет проблем: используйте список преобразования . Например:

  .rotatescale {
    преобразовать: повернуть (45 градусов) масштаб (2);
}

Это дает результаты, которые вы видите ниже.

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

  .transformEl {
    преобразование: наклон (10 градусов, 15 градусов) поворот (45 градусов);
}

Это дает нам результат, который вы видите ниже.

Что произойдет, если сначала повернуть элемент, а затем наклонить его?

  .transformEl {
    преобразовать: повернуть (45 градусов) наклон (10 градусов, 15 градусов);
}

Эффект, показанный ниже, совершенно иной.

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

Умножение матриц и матричные функции

Матрица — это массив чисел или выражений, расположенных в прямоугольнике строк и столбцов. Все преобразования могут быть выражены с использованием матрицы 4 × 4, как показано ниже.

Эта матрица соответствует функции matrix3d , которая принимает 16 аргументов, по одному для каждого значения матрицы 4 × 4.Двумерные преобразования также можно выразить с помощью матрицы 3 × 3, как показано ниже.

Эта матрица 3 × 3 соответствует функции преобразования матрицы . Функция matrix () принимает шесть параметров, по одному для значений от до до f .

Каждая функция преобразования может быть описана с помощью матрицы и функций matrix или matrix3d . На изображении ниже показана матрица 4 × 4 для функции scale3d , где sx , sy и sz — это коэффициенты масштабирования для измерений X, Y и Z соответственно.

Когда мы комбинируем преобразования, такие как transform: scale (2) translate (30px, 50px) , браузер умножает матрицы для каждой функции, чтобы создать новую матрицу. Эта новая матрица применяется к элементу.

Но вот что касается умножения матриц: оно не коммутативно. Для простых значений произведение 3 × 2 совпадает с 2 × 3. Однако с матрицами произведение A × B не обязательно совпадает с произведением B × A .Давайте посмотрим на пример. Мы вычислим матричное произведение transform: scale (2) translate (30px, 50px) .

Наш элемент был масштабирован в два раза, а затем переведен на 60 пикселей по горизонтали и 100 пикселей по вертикали. Мы также можем выразить это произведение с помощью функции matrix : transform: matrix (2, 0, 0, 2, 60, 100) . Теперь давайте изменим порядок этих преобразований, то есть transform: translate (30px, 50px) scale (2) .Результаты показаны ниже.

Обратите внимание, что наш объект по-прежнему масштабируется в два раза, но вместо этого он переведен на 30 пикселей по горизонтали и 50 пикселей по вертикали. Выражаясь с использованием функции matrix , это преобразование : matrix (2, 0, 0, 2, 30, 50) .

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

Это отображается так же, как следующее:

Текущая матрица преобразования элемента p будет одинаковой в обоих случаях.Хотя до сих пор мы сосредоточились на 2D-преобразованиях, вышесказанное также применимо к 3D-преобразованиям. Третье измерение добавляет иллюзию глубины. Это также вносит дополнительную сложность в виде новых функций и свойств.

Поворот на

— CSS 3 файла

Используется для поворота элементов.

Совместимость

-webkit-transform: повернуть Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform: повернуть Internet Exlorer 9+
transform: повернуть Firefox 16+ Inernet Explorer 10+ Opera 12.1+ IE Mobile 10+

Не поддерживается Opera Mini. Для получения подробной информации о совместимости посетите caniuse.com.

Firefox 16 + Safari 5+, Chrome 10 + Internet Explorer 9 + Internet Explorer 10 + Opera 12.1+
iOS 3.2 + Android 2.1 + Blackberry 7 + IE Mobile 10+

Общее описание

Начало вращения находится в центре элемента. Чтобы изменить происхождение, см. Transform-origin. Можно комбинировать несколько преобразований.

преобразование: поворот (1 30 градусов)

1 Элемент повернут на 30 градусов по часовой стрелке.Отрицательные значения приводят к вращению против часовой стрелки.

Пример

Элемент вращается против часовой стрелки

преобразование: поворот (1-40 градусов)

1 Элемент повернут против часовой стрелки на 40 градусов.

Дополнительная литература

Для получения дополнительной информации см. Сайт W3C, сайт Safari и сайт MDN (включая информацию о совместимости для более старых версий браузеров).

Используется для масштабирования элементов.

Совместимость

-webkit-transform: масштабирование Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform: масштабирование Internet Exlorer 9+
преобразование: масштабирование Firefox 16+ Firefox 16+ Opera 12.1+ IE Mobile 10+

Не поддерживается Opera Mini. Для получения подробной информации о совместимости посетите caniuse.com.

Firefox 16 + Safari 5+, Chrome 10 + Internet Explorer 9 + Internet Explorer 10 + Opera 12.1+
iOS 3.2 + Android 2.1 + Blackberry 7 + IE Mobile 10+

Общее описание

Комбинированное обозначение

Источник преобразования находится в центре элемента.Чтобы изменить происхождение, см. Transform-origin. Можно комбинировать несколько преобразований.

преобразование: масштаб (1 2, 2 1,5)

Коэффициент масштабирования, где 1 означает исходный размер, 2 — удвоенный размер и т. Д. Элемент масштабируется как по горизонтали (ось x), так и по вертикали (ось y) с одинаковым коэффициентом. Отрицательные значения отражают элемент.
Необязательно. Коэффициент вертикального масштабирования. Если задан коэффициент, отмеченный цифрой 1, это означает изменение по горизонтали. В этом случае элемент масштабируется в 2 раза по горизонтали и в 1 раз.5 по вертикали.

Горизонтальная шкала

преобразование: scaleX (1 2)

1 Коэффициент горизонтального масштабирования.

Вертикальный масштаб

преобразование: scaleY (1 1,5)

1 Коэффициент вертикального масштабирования.

Дополнительная литература

Используется для наклона элементов.

Совместимость

-webkit-transform: перекос Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform: skew Internet Exlorer 9+
transform: skew Firefox 16+ Firefox 16+ Opera 12.1+ IE Mobile 10+

Не поддерживается Opera Mini. Для получения подробной информации о совместимости посетите caniuse.com.

Firefox 16 + Safari 5+, Chrome 10 + Internet Explorer 9 + Internet Explorer 10 + Opera 12.1+
iOS 3.2 + Android 2.1 + Blackberry 7 + IE Mobile 10+

Общее описание

Комбинированное обозначение

преобразование: наклон (1 30 градусов, 2 10 градусов)

Элемент наклонен вокруг оси x (по горизонтали) на 30 градусов. Положительные значения представляют наклон влево, отрицательные значения наклоняют элемент вправо.
Необязательно. Угол наклона вокруг оси Y (по вертикали). Если задано значение 1, представляет собой угол наклона вокруг оси x. Положительные значения наклоняют элемент вниз, отрицательные значения представляют наклон к вершине.В этом случае элемент наклоняется на 30 градусов по горизонтали (влево) и на 10 градусов по вертикали (вниз).

Горизонтальный перекос

преобразование: skewX (1 30deg)

1 Угол наклона вокруг оси x (по горизонтали).

Вертикальный перекос

преобразование: skewY (1 10deg)

1 Угол наклона вокруг оси Y (вертикальный).

Дополнительная литература

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

Совместимость

-webkit-transform: перевод Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform: перевод Internet Exlorer 9+
transform: перевод Firefox 16+ Firefox 16+ Opera 12.1+ IE Mobile 10 +

Не поддерживается Opera Mini. Для получения подробной информации о совместимости см. Caniuse.com.

Firefox 16 + Safari 5+, Chrome 10 + Internet Explorer 9 + Internet Explorer 10 + Opera 12.1+
iOS 3.2 + Android 2.1 + Blackberry 7 + IE Mobile 10+

Общее описание

Комбинированное обозначение

Источник преобразования находится в центре элемента. Чтобы изменить происхождение, см. Transform-origin. Можно комбинировать несколько преобразований.

преобразование: перевести (1 100 пикселей, 2 20 пикселей)

Элемент перемещается на 100 пикселей вправо.Отрицательные значения представляют собой сдвиг влево.
Необязательно. Вертикальный сдвиг. Если задано значение 1, это означает горизонтальное движение. Положительные значения перемещают элементы вниз, отрицательные значения — вверх. В этом случае элемент перемещается на 100 пикселей вправо и на 20 пикселей вниз.

Горизонтальный перевод

преобразование: translateX (1 100px)

1 Значение горизонтального смещения.

Вертикальный перевод

преобразование: translateY (1 20px)

1 Значение вертикального смещения.

Пример

Комбинация нескольких преобразований

преобразование: поворот (1 33 град.) Масштаб (2 1,5)

Элемент повернут по часовой стрелке на 33 градуса.
Он также увеличивается в 1,5 раза одновременно (без запятой!).

Дополнительная литература

Устанавливает исходную точку для преобразований элемента.

Совместимость

-webkit-transform-origin Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform-origin Internet Exlorer 9+
transform-origin Firefox 16+ Firefox 16+ Opera 12.1+ IE Mobile 10 +

Не поддерживается Opera Mini. Для получения подробной информации о совместимости посетите caniuse.com.

Firefox 16 + Safari 5+, Chrome 10 + Internet Explorer 9 + Internet Explorer 10 + Opera 12.1+
iOS 3.2 + Android 2.1 + Blackberry 7 + IE Mobile 10+

Общее описание

transform-origin: 1 слева 2 вверху

Горизонтальное положение исходной точки для преобразований (ось x).Также может быть процентное значение, где 0% соответствует левому краю, 50% — центру и 100% — правому краю. Возможны промежуточные значения, а также значения длины с контрольной точкой в верхнем левом углу. В каждом случае возможны отрицательные значения. По умолчанию исходная точка преобразования находится как по горизонтали, так и по вертикали в центре элемента (50% 50%).
Необязательно. Вертикальное положение начала координат. 0% означает верх, 100% — право. Остальное из 1 здесь также применимо.

Пример

Один набор значений

transform-origin: 1 справа

1 Исходная точка для преобразований устанавливается по горизонтали вправо и по центру по вертикали (50%).

Установлены два процентных значения

трансформация происхождения: 1 25% 2 75%

Начало координат по оси x (по горизонтали) находится на 25% слева.
Начало оси Y (по горизонтали) — 75% сверху.

Дополнительная литература

Визуализатор функций преобразования CSS

scale () Масштабирует элемент вверх или вниз на 2D-плоскости.

CSS-функция scale () определяет преобразование, которое изменяет размер элемента на 2D-плоскости. Поскольку величина масштабирования определяется вектором, он может изменять размер по горизонтали и вертикали в разных масштабах.

Это масштабное преобразование характеризуется двумерным вектором. Его координаты определяют масштаб масштабирования в каждом направлении. Если обе координаты равны, масштабирование будет равномерным (изотропным) и соотношение сторон элемента сохраняется (это гомотетическое преобразование).

Когда значение координаты выходит за пределы диапазона [-1, 1], элемент увеличивается вдоль этого измерения; находясь внутри, он сжимается. Если он отрицательный, результат будет точечным отражением в этом измерении. Значение 1 не действует.

Функция scale () масштабирует только в 2D. Для масштабирования в 3D используйте вместо него scale3d () .

Функция scale () задается одним или двумя значениями, которые представляют величину масштабирования, применяемую в каждом направлении.

  шкала (sx)
масштаб (sx, sy)
/ *
- sx: число, представляющее абсциссу вектора масштабирования.
- sy: число, представляющее ординату вектора масштабирования. Если не определено, его значение по умолчанию - sx, что приводит к равномерному масштабированию, сохраняющему соотношение сторон элемента.
* /

— Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

scaleX () Масштабирует элемент вверх или вниз по горизонтали.

CSS-функция scaleX () определяет преобразование, которое изменяет размер элемента по оси x (по горизонтали).

Он изменяет абсциссу каждой точки элемента на постоянный коэффициент, за исключением случая, когда масштабный коэффициент равен 1, и в этом случае функция является тождественным преобразованием. Масштабирование не изотропно, и углы элемента не сохраняются. scaleX (-1) определяет осевую симметрию с вертикальной осью, проходящей через начало координат (как указано в свойстве transform-origin ).

scaleX (sx) эквивалентно scale (sx, 1) или scale3d (sx, 1, 1) .

— Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleX

scaleY () Масштабирует элемент вверх или вниз по вертикали .

CSS-функция scaleY () определяет преобразование, которое изменяет размер элемента по оси y (по вертикали).

Он изменяет ординату каждой точки элемента на постоянный коэффициент, за исключением случая, когда масштабный коэффициент равен 1, и в этом случае функция является тождественным преобразованием.Масштабирование не изотропно, и углы элемента не сохраняются. scaleY (-1) определяет осевую симметрию с горизонтальной осью, проходящей через начало координат (как указано в свойстве transform-origin).

scaleY (sy) эквивалентно scale (1, sy) или scale3d (1, sy, 1) .

— Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY

Совет CSS: используйте rotate () и skew () вместе, чтобы представьте немного чистого панк-рока в вашем CSS

В 2018 году индустрия веб-дизайна начнет выглядеть совсем иначе.В прямом смысле.

Со всеми инструментами, которые мы получаем в CSS, дизайнеры получат новые возможности для экспериментов. Я написал о некоторых из этих инструментов в книге «Уловки CSS: пять дизайнерских опасений, которые нужно преодолеть с помощью CSS Grid».

Я до сих пор убежден, что черпать вдохновение из панк-рока 70-х и 80-х годов станет трендом.

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

Начните с обычной полосы

Все мы знаем этот шаблон дизайна: полноширинный фон и приятный рекламный контент.

Мы создали очень простую разметку:

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

Добавьте немного очень простого CSS, и все готово.

  .stripe {
 background-image: linear-gradient (240deg, # eaee44, # 90ec19); 
 набивка: 5 бэр; 
}

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

Используйте transform: rotate (), чтобы ввести угол

Свойство CSS transform имеет множество отличных функций. Одна из самых простых в использовании функций — rotate (). Он берет угловую единицу, такую как 45 градусов, и поворачивает элемент на эту величину.Положительное целое число — поворот по часовой стрелке, отрицательное — поворот против часовой стрелки.

  .stripe {
 background-image: linear-gradient (240deg, # eaee44, # 90ec19); 
 набивка: 5 бэр; 
 
 преобразование: поворот (-5deg); 
}

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

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

skew () спешит на помощь

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

Свойство transform может принимать несколько функций, поэтому мы применяем его в одной строке CSS.

  .stripe {
 background-image: linear-gradient (240deg, # eaee44, # 90ec19); 
 набивка: 5 бэр; 
 
 преобразование: поворот (-5deg) наклон (-5deg); 
}

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

Пора открещивать текст

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

Скорее всего, у вас есть контейнер, чтобы установить ширину вашего контента.

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

Полная разметка:

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

Full CSS:

 .полоса {
 background-image: linear-gradient (240deg, # eaee44, # 90ec19); 
 набивка: 5 бэр; 
 
 преобразование: поворот (-5deg) наклон (-5deg); 
} 
 .stripe__content {
 преобразование: наклон (5deg); 
}

Это дает нам чистые линии с оттенком панк-рока. Посмотрите это в действии на CodePen.

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

Веб-упоминания

Пока нет упоминаний.

Сопутствующие материалы

Райан Седдон | Реальное вращение текста с помощью CSS

Только что видел отличную публикацию в блоге Джонатана Снукса о вращении текста с помощью CSS и о том, как сделать это в IE, используя IE propriety filter , базовое свойство изображения для поворота текстового блока. Но есть лучший способ использовать свойство CSS3 writing-mode , которое присутствует в IE с версии 5.5.

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

CSS

Это невероятно простой метод CSS, который в конечном итоге будет работать со всеми браузерами по мере улучшения их поддержки CSS3. Это одно из немногих свойств, поддерживаемых CSS3 в IE. Значение tb-rl указывает браузеру отображать абзацы с текстом, перемещающимся сверху вниз, справа налево. По сути, поворот текста на 90 градусов по часовой стрелке и выравнивание по правому краю.

Настоящее свойство этих свойств предназначено для отображения других языков в их правильном «режиме письма», таких как японский справа налево или арабский и иврит, которые отображаются справа налево и сверху вниз ( rl-tb ).

Поддержка

На данный момент IE является единственным браузером, который поддерживает его, начиная с IE5.5 и выше, IE8 добавляет дополнительные значения с помощью расширения -ms . В IE5.5 + доступны 4 значения, а для IE8 + — еще 4 значения с помощью расширения -ms.

lr-tb — это значение по умолчанию, слева направо, сверху вниз
rl-tb — Текст перемещается справа налево, сверху вниз
tb-rl — перемещает текст вертикально сверху вниз, справа налево
bt-rl — снизу вверх, справа налево
tb-lr — это и следующие значения доступны только в IE8 + с использованием -ms-writing-mode .Текст располагается сверху вниз, слева направо
bt-lr — снизу вверх, слева направо
lr-bt — слева направо, снизу вверх
rl-bt — справа налево, снизу вверх

Повернуть текст в других браузерах?

Как указано в статье Snooks, мы можем сделать это в браузерах на основе Webkit, Firefox 3.5+, Opera 11 и IE9, используя свойство transform .

Для всех браузеров нам необходимо использовать их расширения поставщиков -moz- , -webkit- , -o- и -ms- .Что касается Opera, то она еще не поддерживает преобразования или свойства режима записи, но я уверен, что это изменится в следующем выпуске версии 10.

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

alexxlab

Разное

Синемаграфия на iphone: Синемаграфия в Instagram / Паразайт

Разное

Размеры css: Как задать ширину html страницы?

Разное

Брошюры примеры: 3300+ брошюры Шаблоны для бесплатной загрузки на Pngtree

Разное

Подбор шрифтовой пары: 404-Ошибка: 404

Разное

Как в инстаграмм сделать личный блог: Как сделать личный блог в Инстаграме: на телефоне, через Фейсбук

Разное