Трансформация
Содержание:
Функция matrix()
Функция matrix() предполагает использование 6 коэффициентов, т.е. чисел без указания единиц измерения вроде %, px, em, deg и т.п. внутри круглых скобок: . По умолчанию элемент имеет такие значения этого свойства:
.elem { transform: matrix(1, 0, 0, 1, 0, 0); }
| 1 | .elem{transformmatrix(1,,,1,,);} |
Матрица смещения
Значения и — значения, на которые должно быть сдвинуто начало координат. Мы также можем представить это с помощью вектора . Вместо tx, ty необходимо подставить значения.
трансформация сдвига
.box1 {
transform: matrix(1, 0, 0, 1, 80, 80);
/*аналогично свойству transform: translate(80px,80px); */
}
|
1 2 3 4 |
.box1{ transformmatrix(1,,,1,80,80); /*аналогично свойству transform: translate(80px,80px); */ } |
Матрица масштабирования
За масштабирование по X отвечает первый коэффициент a, за масштабирование по Y — 4-ый коэффициент d. Поэтому при изменении этих цифр, произойдет изменение масштаба по горизонтальной и вертикальной осям:
трансформация сдвига
.box3 {
transform: matrix(.7, 0, 0, 2, 0, 0);
/*аналогично свойству transform: scale(.7, 2); */
}
|
1 2 3 4 |
.box3{ transformmatrix(.7,,,2,,); /*аналогично свойству transform: scale(.7, 2); */ } |
Матрица наклона
За наклон отвечают коэффициенты b и c, которые и влияют на вид элемента.
.box5 {
background: pink;
transform: matrix(1, 0, -0.5, 1, 0, 0);
/* аналог — свойство skew */
/* transform: skew(-30deg);*/
}
|
1 2 3 4 5 6 |
.box5{ backgroundpink; transformmatrix(1,,-0.5,1,,); /* аналог — свойство skew */ /* transform: skew(-30deg);*/ } |
Матрица поворота
Поворот определяется в виде косинусов и синусов в первых 4-х коэффициентах. Например, поворот против часовой стрелки на 45 градусов будет выражен следующим кодом:
.box7 {
transform: matrix(.71, -.71,.71, 0.71, 0, 0);
/* аналог — функция rotate() */
/* transform: rotate(-45deg); */
}
|
1 2 3 4 5 |
.box7{ transformmatrix(.71,-.71,.71,0.71,,); /* аналог — функция rotate() */ /* transform: rotate(-45deg); */ } |
Посмотреть на примерах:
See the Pen CSS transform: matrix() by Elen (@ambassador) on CodePen.dark
Достаточно сложно, не так ли? Поэтому в практике довольно редко используют это свойство, хотя браузеры рассчитывают все трансформации с его помощью без проблем. Для того чтобы не сушить мозги с коэффициентами, имеет смысл использовать онлайн-генераторы этого свойства, например такой:
- Матрица преобразований
- Изучаем матрицы трансформаций в CSS
- CSS Generator — Transform
- CSS3 Generator transform: matrix3d
Двумерная трансформация
Элементы могут быть искажены или преобразованы как в двух, так и в трёх плоскостях. Двумерные преобразования работают по осям х и у, известных как горизонтальная и вертикальная оси. Трёхмерные преобразования работают по осям х и у, а также оси z. Эти трёхмерные преобразования помогают определить не только длину и ширину элемента, но и глубину. Мы начнем с обсуждения, как трансформировать элементы в двумерной плоскости, а затем перейдём к работе с трёхмерными преобразованиями.
2d rotate
Свойство transform принимает несколько разных значений. Значение rotate обеспечивает возможность поворота элемента от 0 до 360 градусов. Положительное значение поворачивает элемент по часовой стрелке, а использование отрицательного значения поворачивает элемент против часовой стрелки. По умолчанию точкой поворота является центр элемента, 50% 50%, по горизонтали и вертикали. Позже мы обсудим как вы можете изменить эту точку поворота.
HTML
CSS
Демонстрация rotate
Серый квадрат за повёрнутым элементом символизирует исходное положение элемента. Кроме того, при наведении курсора мыши на блок он будет вращаться на 360 градусов по горизонтали. По ходу урока следите за серым квадратом в каждой демонстрации в качестве указателя на исходное положение элемента и горизонтальное вращение, которые помогают продемонстрировать изменения элемента и глубину.
2d scale
Использование значения scale в свойстве transform позволяет изменить визуальный размер элемента. Значение масштаба по умолчанию равно 1, поэтому любое значение от .99 до .01 визуально уменьшает элемент, в то время как любое значение больше или равное 1.01 визуально увеличивает элемент.
HTML
CSS
Демонстрация scale
Можно масштабировать только высоту или ширину элемента, используя значения scaleX и ScaleY. Значение scaleX будет масштабировать ширину элемента, в то время как значение ScaleY будет масштабировать его высоту. Для масштабирования высоты и ширины элемента, но с разными размерами, могут быть одновременно установлены значения по оси х и у. Для этого используя декларацию scale, задав сперва значение по оси x, затем через запятую значение по оси y.
HTML
CSS
2d translate
Значение translate работает несколько похоже на относительное позиционирование, толкает и тянет элемент в разных направлениях, не прерывая обычного потока документа. Использование значения translateX изменит положение элемента по горизонтальной оси, значение translateY изменит положение элемента по вертикальной оси.
Как и со значением scale, чтобы одновременно установить значения по осям x и y, воспользуйтесь значением translate и сперва укажите значение по оси х, затем через запятую значение по оси y.
Значения расстояния, используемые внутри translate, могут быть любыми основными единицами длины, наиболее часто применяются пиксели или проценты. Положительные значения толкают элемент вниз и вправо от позиции по умолчанию, а отрицательные значения тянут элемент вверх и влево.
HTML
CSS
2d skew
Последнее значение skew в группе transform используется для искажения элементов по горизонтальной оси, вертикальной оси или двум осям сразу. Синтаксис очень похож на значения scale и translate. Применение значения skewX деформирует элемент по горизонтальной оси, в то время как значение skewY деформирует элемент по вертикальной оси. Чтобы исказить элемент по двум осям, используется значение skew, сперва задаётся значение по оси х, затем через запятую значение по оси у.
Значение skew измеряется в градусах. Единицы длины, такие как пиксели или проценты, здесь не применимы.
HTML
CSS
Анимация в действии
Вот ещё один интересный пример комбинирования различного рода трансформаций в одной анимации:
<style type="text/css">
#outerspace {
position: relative;
height: 400px;
background: #0c0440 url(/images/outerspace.jpg);
}
div.rocket {
position: absolute;
bottom: 10px;
left: 20px;
-webkit-transition: all 3s ease-in;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-ms-transition: all 3s ease-in;
transition: all 3s ease-in;
}
div.rocket img {
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#outerspace:hover div.rocket {
-webkit-transform: translate(540px,-200px);
-moz-transform: translate(540px,-200px);
-o-transform: translate(540px,-200px);
-ms-transform: translate(540px,-200px);
transition: all 2s ease-in-out;
}
#outerspace:hover div.rocket img {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
</style>
Данный пример может работать не очень хорошо в Safari 3 и в ранних версиях Opera.
Блок, окружённый точечной рамкой, который появляется во время проигрывания анимации, отображает позицию элемента div. Его мы просто смещаем, а его содержание поворачиваем. Всё просто!
.rocket
#outerspace
Для создания более сложной анимации, необходимо воспользоваться специальными ключевыми кадрами.
CSS Advanced
CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients
CSS Shadows
Shadow Effects
Box Shadow
CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries
CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive
Transform: translate
The CSS property is for moving elements to the left or right side, or up and down. It accepts two values:
- One value means that element will be moved up and down or side-to-side. Remember that negative values move elements to the left, positive ones to the right.
- The second value pushes the element down. Negative values move elements up, while positive ones move them down.
The following example moves an HTML element to the right and down with the two values:
Example Copy
It is also possible to move elements along the horizontal or vertical axis. The moves elements vertically, while pushes them horizontally.
Example Copy
You also can move elements in the 3D space by using CSS or the . These functions create an effect that elements move closer or further away from the user.
Example Copy
Rotation (2D)
Rotates an element around a fixed point on the 2D plane.
The CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. The amount of rotation created by is specified by an angle value expressed in degrees, gradians, radians, or turns. If positive, the movement will be clockwise; if negative, it will be counter-clockwise. (A rotation by 180° is called point reflection.)
The axis of rotation passes through an origin, defined by the CSS property.
— More info: developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate
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. что-то совсем уж длинно получилось, извиняюсь.
Значения свойства
| Значение | Описание |
|---|---|
| none | Преобразование не применяется. |
| matrix(n,n,n,n,n,n) | Применяет 2D преобразование с помощью матрицы из шести значений. |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Применяет 3D преобразование с помощью матрицы из шестнадцати(4х4) значений. |
| translate(x,y) | Функция translate позволяет перемещать элементы влево, вправо, вверх или вниз. Эта функция аналогична поведению position: relative; При использовании этой функции, можно сдвигать элементы не влияя на поток документа. |
| translate3d(x,y,z) | Применяет 3D смещение. |
| translateX(x) | Определяет смещение, только по оси Х. |
| translateY(y) | Определяет смещение, только по оси У. |
| translateZ(z) | Определяет 3D смещение, только по оси Z. |
| scale(x,y) | Функция scale(x,y) масштабирует элемент горизонтально и вертикально. Если указано только одно значение, оно будет использовано сразу и для горизонтального масштабирования и для вертикального. Например, scale(1) оставит элемент такого же размера, scale(2) удвоит его пропорции, scale(0.5) уменьшит элемент в 2 раза и так далее. Предоставление различных значений будет искажать элемент. Масштабируемый элемент будет увеличиваться от своего центра или уменьшаться к нему, другими словами центр элемента будет всегда находится в одной и той же точке, не зависимо от его размера. Таково поведение элемента по умолчанию, чтобы изменить это можно воспользоваться свойством transform-origin. |
| scale3d(x,y,z) | Применяет 3D преобразование масштаба. |
| scaleX(x) | Определяет преобразование масштаба по оси Х. |
| scaleY(y) | Определяет преобразование масштаба по оси У. |
| scaleZ(z) | Определяет 3D преобразование масштаба по оси Z. |
| rotate(angle) | Функция rotate() поворачивает элемент вокруг точки происхождения по заданному значению угла. Как и в случае с функцией scale(), по умолчанию точка происхождения — это центр элемента. |
| rotate3d(x,y,z,angle) | Определяет 3D поворот. |
| rotateX(angle) | Определяет 3D поворот вдоль оси Х. |
| rotateY(angle) | Определяет 3D поворот вдоль оси У. |
| rotateZ(angle) | Определяет 3D поворот вдоль оси Z. |
| skew(x, y) | Функция skew(x, y) определяет наклон по осям X и Y. Как и следовало ожидать, x определяет наклон оси X,а y определяет наклон оси Y. Если второй параметр опущен, то перекос элемента произойдёт только по оси X. |
| skewX(angle) | Определяет 2D преобразование наклона вдоль оси Х. |
| skewY(angle) | Определяет 2D преобразование наклона вдоль оси У. |
| perspective(n) | Определяет перспективу для преобразования 3D элемента. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
CSS Свойство:
transform:
Результат:
Демонстрация работы свойтсва transform.
CSS Код:
#myDIV { background-color: lightblue; transform: rotate(10deg); }
Кликните на любое значение свойства, чтобы увидеть результат
Трёхмерная трансформация
Работая с двумерной трансформацией мы можем менять элементы по горизонтальной и вертикальной осям, однако есть и другая ось, вдоль которой мы можем трансформировать элементы. С помощью трёхмерных преобразований мы можем менять элементы по оси 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. Эти свойства требуют чуть больше математики, а также глубокого понимания матриц, стоящих за каждой трансформацией. Если вам интересно чуть глубже взглянуть на это, тогда вперёд!
CSS 3D Transform Methods
| Function | Description |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Defines a 3D transformation, using a 4×4 matrix of 16 values |
| translate3d(x,y,z) | Defines a 3D translation |
| translateX(x) | Defines a 3D translation, using only the value for the X-axis |
| translateY(y) | Defines a 3D translation, using only the value for the Y-axis |
| translateZ(z) | Defines a 3D translation, using only the value for the Z-axis |
| scale3d(x,y,z) | Defines a 3D scale transformation |
| scaleX(x) | Defines a 3D scale transformation by giving a value for the X-axis |
| scaleY(y) | Defines a 3D scale transformation by giving a value for the Y-axis |
| scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis |
| rotate3d(x,y,z,angle) | Defines a 3D rotation |
| rotateX(angle) | Defines a 3D rotation along the X-axis |
| rotateY(angle) | Defines a 3D rotation along the Y-axis |
| rotateZ(angle) | Defines a 3D rotation along the Z-axis |
| perspective(n) | Defines a perspective view for a 3D transformed element |
❮ Previous
Next ❯
Rotation (3D)
Rotates an element around the horizontal axis.
The CSS function defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it. The amount of rotation created by is specified by an angle value expressed in degrees, gradians, radians, or turns. If positive, the movement will be clockwise; if negative, it will be counter-clockwise.
The axis of rotation passes through an origin, defined by the transform-origin CSS property.
— More info : developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateX
Rotates an element around the vertical axis.
The CSS function defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it. The amount of rotation created by rotateY() is specified by an angle value expressed in degrees, gradians, radians, or turns. If positive, the movement will be clockwise; if negative, it will be counter-clockwise.
The axis of rotation passes through an origin, defined by the transform-origin CSS property.
— More info : developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY
Rotates an element around the z-axis.
The CSS function defines a transformation that rotates an element around the z-axis without deforming it.
The amount of rotation created by rotateZ() is specified by an angle value expressed in degrees, gradians, radians, or turns. If positive, the movement will be clockwise; if negative, it will be counter-clockwise.
The axis of rotation passes through an origin, defined by the transform-origin CSS property.
— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateZ
Множественные трансформации на одном элементе
Для применения множественных трансформаций к одному и тому же элементу просто перечислите настройки через пробел. К примеру:
<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
Комбинация функций в свойстве transform
Достаточно часто приходится комбинировать 2 или 3 функции свойства transform. В этом случае следует указывать функции в свойстве transform через пробел, а не писать их несколько друг под другом.
несколько функций в свойстве transform
.circle1:hover {
transform: scale(1.5) rotate(90deg) translateY(-50px);
}
.circle2:hover {
transform: translateY(-50px) rotate(90deg) scale(1.5) ;
}
.circle3:hover {
transform: scale(1.5);/* неверно, выпонится только последняя трансформация */
transform: rotate(90deg); /* неверно, выпонится только последняя трансформация */
transform: translateY(-50px);
}
|
1 2 3 4 5 6 7 8 9 10 11 |
.circle1hover{ transformscale(1.5)rotate(90deg)translateY(-50px); } .circle2hover{ transformtranslateY(-50px)rotate(90deg)scale(1.5); } .circle3hover{ transformscale(1.5);/* неверно, выпонится только последняя трансформация */ transformrotate(90deg);/* неверно, выпонится только последняя трансформация */ transformtranslateY(-50px); } |
See the Pen CSS transform: several functions by Elen (@ambassador) on CodePen.dark
Обратите внимание, что в зависимости от того, в какой последовательности перечислены свойства, эффект трансформации, возникающий при наведении, может быть разным. Альтернативой указанию нескольких свойств служит функция matrix()
Альтернативой указанию нескольких свойств служит функция matrix().
How to Use CSS Transitions?
To create a transition effect, you must specify two things:
- the CSS property you want to add an effect to
- the duration of the effect
Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.
The following example shows a 100px * 100px red <div> element. The <div>
element has also specified a transition effect for the width property, with a duration of 2 seconds:
Example
div
{ width: 100px; height: 100px;
background: red; transition: width 2s;
}
The transition effect will start when the specified CSS property (width) changes value.
Now, let us specify a new value for the width property when a user mouses over the <div> element:
Example
div:hover
{
width: 300px;
}
Notice that when the cursor mouses out of the element, it will gradually change back to its original style.
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 ❯
Трехмерный сдвиг элементов
Следующая функция — translate3d() позволяет нам задать трехмерное преобразование путем сдвига элемента, используя координаты трёх осей (X,Y и Z). Перейдем к примеру:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Трехмерный сдвиг элементов</title>
<style>
.static {
display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */
margin: 10px; /* внешние отступы со всех сторон */
background: gray; /* цвет заднего фона */
}
div {
width: 180px; /* ширина элемента */
height: 100px; /* высота элемента */
line-height: 100px; /* высота строки (выраывниваем по вертикали) */
text-align: center; /* горизонтальное выравнивание текста по центру */
transition: 0.2s; /* переходный эффект составляет 200 миллисекунд (0,2 секунды) */
}
.test2, .test4, .test6 {background: orange;} /* цвет заднего фона */
.test, .test3, .test5 {background: plum;} /* цвет заднего фона */
.test:hover {
transform: perspective(500px) rotateX(45deg) translate3d(20px,20px,20px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
.test2:hover {
transform: perspective(500px) rotateX(45deg) translate3d(-20px,-20px,-20px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
.test3:hover {
transform: perspective(500px) rotateX(45deg) translate3d(-20px,-20px,-80px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
.test4:hover {
transform: perspective(500px) rotateX(45deg) translate3d(0,0,-80px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
.test5:hover {
transform: perspective(500px) rotateX(45deg) translate3d(20px,0, 40px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
.test6:hover {
transform: perspective(500px) rotateX(45deg) translate3d(0,20px, 40px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
</style>
</head>
<body>
<div class = "static"><div class = "test">translate3d(20px,20px,20px)*</div></div>
<div class = "static"><div class = "test2">translate3d(-20px,-20px,-20px)*</div></div>
<div class = "static"><div class = "test3">translate3d(-20px,-20px,-80px)*</div></div><br>
<div class = "static"><div class = "test4">translate3d(0,0,-80px)*</div></div>
<div class = "static"><div class = "test5">translate3d(20px,0, 40px)*</div></div>
<div class = "static"><div class = "test6">translate3d(0,20px, 40px)*</div></div>
</body>
</html>
По аналогии с ранее рассмотренными функциями сдвига элементов, функция translate3d() задаёт сдвиг одновременно по осям X,Y и Z. Первое значение функции определяет горизонтальный сдвиг элемента (положительное значение сдвигает элемент вправо по оси X, а отрицательное влево по оси X). Второе значение функции определяет вертикальный сдвиг элемента (положительное значение сдвигает элемент вниз по оси Y, а отрицательное вверх по оси Y). Третее значение функции определяет сдвиг по оси Z (отрицательное значение отдаляет элемент). Если указать значение 0 для любой оси, то элемент не будет по ней сдвигаться, по аналогии с другими функциями.
Результат нашего примера:
Рис. 183 Пример трехмерного сдвига элементов (функция преобразования элемента translate3d).
