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

The matrix() Method

The method combines all the 2D transform methods into one.

The matrix() method take six parameters, containing mathematic functions,
which allows you to rotate, scale, move (translate), and skew elements.

The parameters are as follow: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Example

div
{
 
transform: matrix(1, -0.3, 0, 1, 0, 0);}

CSS Transform Properties

The following table lists all the 2D transform properties:

Property	Description
transform	Applies a 2D or 3D transformation to an element
transform-origin	Allows you to change the position on transformed elements

CSS 2D Transform Methods

Function	Description
matrix(n,n,n,n,n,n)	Defines a 2D transformation, using a matrix of six values
translate(x,y)	Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n)	Defines a 2D translation, moving the element along the X-axis
translateY(n)	Defines a 2D translation, moving the element along the Y-axis
scale(x,y)	Defines a 2D scale transformation, changing the elements width and height
scaleX(n)	Defines a 2D scale transformation, changing the element’s width
scaleY(n)	Defines a 2D scale transformation, changing the element’s height
rotate(angle)	Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle)	Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle)	Defines a 2D skew transformation along the X-axis
skewY(angle)	Defines a 2D skew transformation along the Y-axis

❮ Previous
Next ❯

transform:scale(x,y) — масштабирование объекта

Команда для масштабирования объекта scale(x,y), где аргументы в скобках — масштабирование по осям Х и У соответственно.

Пример #5. Масштабирование объектов в html

На странице преобразуется в следующее

При наведении квадрат становится больше по горизонтали на 50% (коэффициент 1.5), а по вертикали на 30% (коэффициент 1.3). Значение 1 означает отсутствие масштабирования. Все что меньше 1, будет означать уменьшение объекта.

Примечание

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: scaleX(x) — масштабирование по Х, scaleY(y) — масштабирование по У.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Множественные трансформации на одном элементе

Для применения множественных трансформаций к одному и тому же элементу просто перечислите настройки через пробел. К примеру:

<style type="text/css">

    #submenu {
        background-color: #eee;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
    }
    #submenu:hover {
        background-color: #fc3;
        -webkit-transform: rotate(360deg) scale(2);
        -moz-transform: rotate(360deg) scale(2);
        -o-transform: rotate(360deg) scale(2);
        -ms-transform: rotate(360deg) scale(2);
        transform: rotate(360deg) scale(2);
    }

</style>

Данные настройки при наводке мыши за 1 секунду изменят цвет под-меню, повернут его, увеличат в размере.

box 1
box 2

2D-трансформации элементов

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

1. Функции 2D-трансформации transform

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

Допустимые значения:

matrix() — любое числоtranslate(), translateX(), translateY() — единицы длины (положительные и отрицательные), %scale(), scaleX(), scaleY() — любое числоrotate() — угол (deg, grad, rad или turn)skew(), skewX(), skewY() — угол (deg, grad, rad)

Функция	Описание
none	Значение по умолчанию, означает отсутствие трансформации. Также отменяет трансформацию для элемента из группы трансформируемых элементов.
matrix(a, c, b, d, x, y)	Смещает элементы и задает способ их трансформации, позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения. Значение a изменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает. Значение c деформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз. Значение b деформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо. Значение d изменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает. Значение x смещает элемент по оси X, положительное — вправо, отрицательное — влево. Значение y смещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх.
translate(x,y)	Сдвигает элемент на новое место, перемещая относительно обычного положения вправо и вниз, используя координаты X и Y, не затрагивая при этом соседние элементы. Если нужно сдвинуть элемент влево или вверх, то нужно использовать отрицательные значения.
translateX(n)	Сдвигает элемент относительно его обычного положения по оси X.
translateY(n)	Сдвигает элемент относительно его обычного положения по оси Y.
scale(x,y)	Масштабирует элементы, делая их больше или меньше. Значения от 0 до 1 уменьшают элемент. Первое значение масштабирует элемент по ширине, второе — по высоте. Отрицательные значения отображают элемент зеркально.
scaleX(n)	Функция масштабирует элемент по ширине, делая его шире или уже. Если значение больше единицы, элемент становится шире, если значение находится между единицей и нулем, элемент становится уже. Отрицательные значения отображают элемент зеркально по горизонтали.
scaleY(n)	Функция масштабирует элемент по высоте, делая его выше или ниже. Если значение больше единицы, элемент становится выше, если значение находится между единицей и нулем — ниже. Отрицательные значения отображают элемент зеркально по вертикали.
rotate(угол)	Поворачивает элементы на заданное количество градусов, отрицательные значения от -1deg до -360deg поворачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg) поворачивает элемент на два полных оборота.
skew(x-угол,y-угол)	Используется для деформирования (искажения) сторон элемента относительно координатных осей. Если указано одно значение, второе будет определено браузером автоматически.
skewX(угол)	Деформирует стороны элемента относительно оси X.
skewY(угол)	Деформирует стороны элемента относительно оси Y.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

Наведите курсор мыши на блоки, чтобы посмотреть функции трансформации в действии.

2. Точка трансформации transform-origin

Свойство позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center, или 50% 50%. Задаётся только для трансформированных элементов. Не наследуется.

transform-origin
Значения:
ось Х(left, center, right, длина, %) ось Y(top, center, bottom, длина, %)	Пара значений, заданная с помощью ключевых слов, единиц длины или процентов определяет, относительно какой части элемента будет происходить трансформация. Значения больше 100% увеличивают область трансформации элемента.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

3. Множественные трансформации

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

div {transform: scale(1.5) rotate(-10deg);}

CSS3-переходы
CSS3-анимация

Направление анимации

CSS свойство animation-direction определяет будет ли анимация воспроизводиться в обратном направлении, или в виде чередующихся циклов. По аналогии с предыдущими свойствами допускается указывать несколько значений, перечисленных через запятую (для каждой отдельной анимации).

Ниже представлены возможные значения для настройки направления анимации:

Значение	Описание
normal	Каждый раз, когда цикл анимации завершён, анимация сбрасывается в начало и начинает цикл заново. Это значение по умолчанию.
reverse	Анимация воспроизводиться в обратном направлении.
alternate	Анимация воспроизводиться как normal каждый нечетный раз (1, 3, 5…) и как reverse каждый четный раз (2, 4, 6…).
alternate-reverse	Анимация воспроизводиться как reverse каждый нечетный раз (1, 3, 5…) и как normal каждый четный раз (2, 4, 6…).

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Направление анимации</title>
<style>
div {
width: 75px; /* ширина элемента */
height: 75px; /* высота элемента */
border-radius: 60px; /* форма углов элемента */
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
color: white; /* цвет шрифта белый */
padding: 15px; /* внутренние отступы элемента со всех сторон */
position: relative; /* элемент с относительным позиционированием */
animation-duration: 1.5s; /* задаём продолжительность анимации 1,5 секунды */
animation-name: iliketomoveit; /* задаём имя анимации */
animation-iteration-count: infinite; /* анимация будет повторяться бесконечно  */
}
.test {
animation-direction: normal; /* при завершении цикла анимации, анимация сбрасывается в начало и начинает цикл заново. */ 
}
.test2 {
animation-direction: reverse; /* анимация воспроизводиться в обратном направлении */ 
}
.test3 {
animation-direction: alternate; /* анимация воспроизводиться как normal каждый нечетный раз (1, 3, 5...) и как reverse каждый четный раз (2, 4, 6...) */ 
}
.test4 {
animation-direction: alternate-reverse; /* анимация воспроизводиться как reverse каждый нечетный раз (1, 3, 5...) и как normal каждый четный раз (2, 4, 6...) */ 
}
@keyframes iliketomoveit {
	0%   {top: 0px;} /* начало цикла анимации */
	25%  {top: 180px; background: red;} /* 25% от продолжительности анимации */
	75%  {top: 90px;} /* 75% от продолжительности анимации */
	100% {top: 0px; background: black;} /* конец цикла анимации */
}
</style>
</head>
	<body>
		<div class = "test">normal</div>
		<div class = "test2">reverse</div>
		<div class = "test3">alternate</div>
		<div class = "test4">alternate-reverse</div>
	</body>
</html>

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

С использованием селектора класса и свойства animation-direction мы указали различные значения, которые определяют возможные направления для анимации.

Результат нашего примера:

Рис. 198 Направление анимации в CSS.

Множественные трансформации

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

    div {transform: scale(1.5) rotate(-10deg);}

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

CSS3 3D трансформации создают объемные реалистичные эффекты на веб-страницах.

3D трансформации работают аналогично с 2D трансформациями с разницей в том, что элементы могут перемещаться вдоль оси Z, вглубь экрана и из него.

Чтобы активизировать 3D пространство, нужно установить свойство perspective для родительского контейнера.

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

IE: 10.0
Firefox: 16.0, 10. -moz-
Chrome: 36.0, 12.0 -webkit-
Safari: 4.0 -webkit-
Opera: 23.0, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: —
Android Browser: 44, 4.1 -webkit-
Chrome for Android: 44

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

Есть три доступных свойства для трансформации:

• transform определяет, какая функция будет применяться (translate, rotate, scale и др.);
• transform-origin позволяет изменять точку начала преобразования (работает как background-position);
• transform-style для настройки 3D.

Обратите внимание, что в отличие от background и border, свойство transform не является сокращённым. Здесь мы будем использовать только transform

Здесь мы будем использовать только transform.

Не прерывает поток

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

Использование библиотеки Animate.css

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

Посмотреть все возможные анимации вы можете на сайте проекта, там же доступна к скачиванию минимизированная версия стилей (стили без пробелов и переносов строк). Кроме того, в репозитории GitHub автора проекта вы сможете скачать для изучения, или использования не сжатую версию CSS стилей библиотеки Animate.css. Давайте перейдем в репозиторий и скачаем его содержимое (кнопка «Clone or Download»). На этапе изучения Вам понадобится из скачанного архива только файл animate.css (не сжатая версия).

Чтобы использовать эту библиотеку, достаточно скопировать этот файл стилей в папку с Вашим документом и подключить с использованием тега <link>:

<head>
	<link rel = "stylesheet" href = "animate.css"> 
</head>

Давайте рассмотрим простую анимацию из библиотеки, которая измененяет прозрачность элемента:

@keyframes fadeIn {
	from { /* начало цикла анимации (аналогично 0%) */
	opacity: ; /* элемент полностью прозрачный */
	}

	to { /* конец цикла анимации (аналогично 100%) */
	opacity: 1; /* элемент непрозрачный */
	}
}
.fadeIn {
animation-name: fadeIn; /* имя анимации (соответствует имени в правиле @keyframes) */
}

Эти ключевые кадры с помощью свойства opacity позволяют изменить прозрачность элемента с полностью прозрачного до непрозрачного состояния.

Но этого пока недостаточно, чтобы запустить интересующую Вас анимацию библиотеки Animate.css. Для того, чтобы запустить анимацию Вы можете, но не обязаны, воспользоваться следующими созданными автором проекта классами:

/* базовый класс, который позволяет запустить анимацию один цикл */ 
.animated { 
animation-duration: 1s; /* продолжительность анимации 1 секунда */
animation-fill-mode: both; /* задает стиль для элемента, когда анимация не воспроизводится (как только анимация будет завершена и перед тем как она будет запущена - во время задержки).*/
}

/* добавление класса .infinite элементу, которому установлен класс .animated позволит бесконечно проигрывать анимацию */ 
.animated.infinite {
animation-iteration-count: infinite; /* анимация будет проигрываться бесконечно */
}

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

Мы с Вами рассмотрим пример в котором будем использовать только классы из библиотеки Animate.css и установим анимацию только с использованием каскадных таблиц стилей.

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Анимация с использованием библиотеки Animate.CSS</title>
	<link rel = "stylesheet" href = "animate.css"> <!-- подключаем библиотеку Animate.css -->
</head>
	<body>
		<img src = "/images/fair.png" alt = "mishka" width = "200px" height = "200px" class = "animated infinite fadeIn">
	</body>
</html>

В этом примере мы подключили с использованием тега <link> библиотеку Animate.css и разместили изображение, к которому подключили (указали через пробел) следующие 3 класса из библиотеки:

• Класс animated — определяет продолжительность анимации равной 1 секунде (свойство animation-duration) и свойством animation-fill-mode задает стиль для элемента, когда анимация не воспроизводится (как только анимация будет завершена и перед тем как она будет запущена — во время задержки).
• Класс infinite — библиотека содержит селектор .animated.infinite, который выбирает все элементы класса animated с классом infinite и определяет, что анимация будет проигрываться бесконечно (благодаря свойству animation-iteration-count со значением infinite).
• Класс fadeIn — содержит имя анимации (значение свойства animation-name), которое соответствует имени, определенном в правиле @keyframes, содержащее ключевые кадры этой анимации.

Результат нашего примера:

Рис.202 Пример анимации с использованием библиотеки Animate.CSS.

Анимация элементов. Часть 1.

Верстка по flexbox. Часть 1.

Example: Rotate a FrameworkElement 45 Degrees

The following example uses a RotateTransform to rotate a button clockwise by 45 degrees. The button is contained in a StackPanel that has two other buttons.

By default, a RotateTransform rotates about the point (0, 0). Because the example does not specify a center value, the button rotates about the point (0, 0), which is its upper-left corner. The RotateTransform is applied to the RenderTransform property. The following illustration shows the result of the transformation.

Clockwise rotation 45 degrees from upper-left corner

The next example also uses a RotateTransform to rotate a button 45 degrees clockwise, but it also sets the RenderTransformOrigin of the button to (0.5, 0.5). The value of the RenderTransformOrigin property is relative to the size of the button. As a result, the rotation is applied to the center of the button, instead of its upper-left corner. The following illustration shows the result of the transformation.

Clockwise rotation 45 degrees around center

The following example uses the LayoutTransform property instead of the RenderTransform property to rotate the button. This causes the transformation to affect the layout of the button, which triggers a full pass by the layout system. As a result, the button is rotated and then repositioned because its size has changed. The following illustration shows the result of the transformation.

LayoutTransform used to rotate the button

Трёхмерная трансформация

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

3d rotate

До сих пор мы обсуждали, как повернуть объект по часовой или против часовой стрелки на плоской поверхности. С помощью трёхмерных преобразований мы можем вращать элемент вокруг любых осей. Для этого мы используем три новые значения, включая rotateX, rotateY н rotateZ.

Значение rotateX позволяет поворачивать элемент вокруг оси х, как будто он сгибается пополам по горизонтали. Значение rotateY позволяет поворачивать элемент вокруг оси у, как будто он сгибается пополам по вертикали. И, наконец, значение rotateZ позволяет вращать элемент вокруг оси z.

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

HTML

CSS

3d scale

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

HTML

CSS

3D translate

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

Хотя это может показаться очень похоже на двумерную трансформацию scale, на самом деле у них есть различия. Преобразование происходит по оси z, а не по осям х или у. При работе с трёхмерными преобразованиями возможность переместить элемент по оси z даёт серьёзные преимущества, как при построении куба в примере ниже.

HTML

CSS

3D skew

skew является единственной двумерной трансформацией, которая не может быть преобразована в трёхмерном масштабе. Элементы могут быть наклонены по осям х и у, затем преобразованы трёхмерно как хотелось бы, но они не могут быть наклонены по оси z.

Сокращённые трёхмерные трансформации

Как и в случае комбинаций двумерных преобразований, есть также значения для записи сокращённых трёхмерных преобразований. Эти значения включают rotate3d, scale3d, transition3d и matrix3d. Эти свойства требуют чуть больше математики, а также глубокого понимания матриц, стоящих за каждой трансформацией. Если вам интересно чуть глубже взглянуть на это, тогда вперёд!

Transformations and Coordinate Systems

When you transform an object, you do not just transform the object, you transform coordinate space in which that object exists. By default, a transform is centered at the origin of the target object’s coordinate system: (0,0). The only exception is TranslateTransform; a TranslateTransform has no center properties to set because the translation effect is the same regardless of where it is centered.

The following example uses a RotateTransform to rotate a Rectangle element, a type of FrameworkElement, by 45 degrees about its default center, (0, 0). The following illustration shows the effect of the rotation.

A Rectangle element rotated 45 degrees about the point (0,0)

By default, the element rotates about its upper-left corner, (0, 0). The RotateTransform, ScaleTransform, and SkewTransform classes provide CenterX and CenterY properties that enable you to specify the point at which the transform is applied.

The next example also uses a RotateTransform to rotate a Rectangle element by 45 degrees; however, this time the CenterX and CenterY properties are set so that the RotateTransform has a center of (25, 25). The following illustration shows the effect of the rotation.

A Rectangle element rotated 45 degrees about the point (25, 25)

backface-visibility

При работе с трёхмерными преобразованиями, элементы время от времени трансформируются таким образом, что их поверхность отворачивается от экрана. Это может быть вызвано установкой значения rotateY(180deg), к примеру. По умолчанию эти элементы показываются с обратной стороны. Так что если вы не желаете видеть эти элементы вообще, установите свойство backface-visibility как hidden, и вы спрячете элемент всякий раз, когда он отворачивается от экрана.

Другим значением для backface-visibility является значение по умолчанию visible, оно всегда показывая элемент, независимо от того, в каком направлении он смотрит.

В демонстрации ниже обратите внимание, что второй блок не отображается, поскольку установлена запись backface-visibility: hidden

Свойство backface-visibility имеет более важное значение при использовании анимации

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Transform

Из названия свойства понятно, что он отвечает за трансформацию блоков. Имеет большое количество функций и еще большее количество их сочетаний. Эксперементируя, можно даже придумать 3D эффекты с Transform, но эта статья лишь о 2D. в CSS прописывается как transform: property, где property может содержать одно из нижеперечисленных значений:

translateX(10px) – сдвиг по горизонтали
translateY(10px) – сдвиг по вертикали
translate(25px, 30%) – сдвиг по диагонали
scaleX(2) – масштабирование по горизонтали. При этом 1 равен 100%
scaleY(2) – масштабирование по вертикали
scale(.5, 2) – масштабирование как по вертикали, так и по горизонтали
rotate(10deg) – поворот в заданную сторону (значение в градусах). При этом отрицательные значения отвечают за поворот влево, а положительные – вправо
skewX(20deg) – наклон по горизонтали. Значение так же в градусах
skewY(20deg) – наклон по вертикали
skew(5deg, -20deg) – наклон по вертикали и горизонтали
matrix(w, sky, skx, h, mx, my) – задает все вышеописанные свойства в одном, кроме rotate() и skew(). Значения matrix():
w – ширина объекта. 1 равен 100%
h – высота объекта. 1 равен 100%
sky – наклон по вертикали. 0 – без наклона
skx – наклон по горизонтали. 0 – без наклона
mx – сдвиг по горизонтали. 0 – без сдвига
my – сдвиг по вертикали. 0 – без сдвига

Пример в конце статьи.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Transition

Отвечает за плавность анимации блока. Имеет несколько свойств, которые можно задать одним. Взаимодействует не только с transform (например, с помощью transition можно сделать плавное изменение цвета или размера блока). Не поддерживается устаревшими браузерами (решается с помощью специфических -moz-transition, -webkit-transition и т.д.).

transition-property – задает свойство элемента, которое будет анимироваться
transition-duration – Задает время анимации в секундах. 1 равен одной секунде.
transition-timing-function – Тип анимации, где могут быть указаны:
– ease – медленная анимация с замедлением в середине
– linear – медленная анимация с ускорением к концу
– ease-in – анимация плавно начинается
– ease-out – анимация плавно заканчивается
– ease-in-out – анимация плавно начинается и плавно заканчивается
transition-delay – задержка перед началом анимации
cubic-bezier – анимация по Кривой Безье
transition(property, duration, timing-function) – задает все вышеперечисленные свойства, исключая cubic-beizer

Стоит отметить, что CSS3-аналог transition — animate, который работает с ключевыми кадрами (@keyframes)

Взаимодействие и примеры

transition в сочетании с transform дают нам плавную и гибкую анимацию без javascript.

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

HTML:

Код

<div class=»container»>
<h4>translate(15px, 15px)</h4>
<div class=»transformed t-rotate» data-content=»Translate»></div>
</div>

CSS:

Код

.container {
position: relative;
display: inline-block;
height: 180px;
margin: 0 1em 1em;
}
.transformed:before {
content: attr(data-content);
display: block;
margin: 0;
padding: 7px 0;
text-align: center;
font-weight: normal;
background: rgba(255,255,255,.7);
}
.transformed {
position: absolute;
bottom: 0;
background: yellowgreen;
opacity: 0.7;
}
.t-rotate {
transform: rotate(-20deg);
transition(transform, 1s, ease-in-out);
}
</b>

Спасибо за прочтение.
P.S. что-то совсем уж длинно получилось, извиняюсь.

Перспектива

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

CSS

#scene {
perspective: 1000px;
transform: rotateX(-15deg) rotateY(-15deg);
}

1 2 3 4 5 6

#scene { perspective1000px; transformrotateX(-15deg)rotateY(-15deg); }

Чем меньше длина перспективы, тем ближе точка схода и тем более выражен 3D-эффект:

CSS

#scene {
perspective: 200px;
transform: rotateX(-15deg) rotateY(-45deg);
}

1 2 3 4 5 6

#scene { perspective200px; transformrotateX(-15deg)rotateY(-45deg); }