Css 2d transforms
Содержание:
Поддержка 3D-преобразований CSS3
Метод преобразования элемента в трех измерениях с помощью свойства CSS transform включает поддержку свойства perspective для установки перспективы в z-пространстве и свойства backface-visibility для переключения отображения обратной стороны преобразуемого элемента.
Текущий статус: рабочий проект W3C
Поддерживается со следующих версий:
| Стационарные | Мобильные | ||||||||
| Chrome 12 * | Firefox 10 * | IE 15 * | Opera 4 * | Safari 3.1 * | Chrome 3.2 * | Firefox 3 * | IE 37 | Opera 54 | Safari 50 |
| Поддержи-вается | Поддержи-вается | Частично | Поддержи-вается | Поддержи-вается | Поддержи-вается | Поддержи-вается | Поддержи-вается | Поддержи-вается | Поддержи-вается |
* — требуется префикс.
Пожалуйста, опубликуйте ваши мнения по текущей теме материала. За комментарии, отклики, лайки, дизлайки, подписки низкий вам поклон!
Двумерная трансформация
Элементы могут быть искажены или преобразованы как в двух, так и в трёх плоскостях. Двумерные преобразования работают по осям х и у, известных как горизонтальная и вертикальная оси. Трёхмерные преобразования работают по осям х и у, а также оси 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
CSS Advanced
CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS 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 Image ReflectionCSS object-fitCSS object-positionCSS 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
JavaScript
JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()
JS Boolean
constructor
prototype
toString()
valueOf()
JS Classes
constructor()
extends
static
super
JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()
JS Error
name
message
JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()
JS JSON
parse()
stringify()
JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()
JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()
JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()
(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx
JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while
JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()
Sintaxe
Gramática Formal: <transform-função> * | none
transform: none transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0) transform: translate(12px, 50%) transform: translateX(2em) transform: translateY(3in) transform: scale(2, 0.5) transform: scaleX(2) transform: scaleY(0.5) transform: rotate(0.5turn) transform: skewX(30deg) transform: skewY(1.07rad) transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0) transform: translate3d(12px, 50%, 3em) transform: translateZ(2px) transform: scale3d(2.5, 1.2, 0.3) transform: scaleZ(0.3) transform: rotate3d(1, 2.0, 3.0, 10deg) transform: rotateX(10deg) transform: rotateY(10deg) transform: rotateZ(10deg) transform: perspective(17px) transform: translateX(10px) rotate(10deg) translateY(5px)
- Uma ou mais das para serem aplicadas, veja abaixo.
- Espcifica que nenhuma função transform deve ser aplicada.
Функции transform
Трансформации бывают как 2d, так и 3d. Вторые являются расширением двухмерных функций. Сначала рассмотрим более актуальные 2d варианты.
Translate
Функция задает смещение по горизонтали и вертикали. Например, зададим смещение объект по горизонтали на 30px и по вертикали на 20px.
Возникает вопрос, зачем нужна эта функция, которая повторяет уже существующие возможности CSS по сдвигу элемента, например position? Но каких-то разъяснений не нашел.
Величина смещения может быть задана в любых применяемых в CSS единицах, например px или em. Если задать только один параметр, тогда смещение будет только по горизонтали. Отрицательные значения сдвигают элемент в противоположную сторону.
Также есть две функции для смещения элемента только одной оси X или Y.
Scale
Растягивание (масштабирование) блока на плоскости. Масштаб задается по осям x и y – . Если задано одно значение воздействие будет по двум осям сразу.
Создадим два блока с одинаковыми первоначальными размерами. Ко второму с красным прозрачным фоном применим .
На демонстрации элемент с красным фоном увеличился в 2 раза.
See the Pen
scale by Андрей (@adlibi)
on CodePen.
Для масштабирования по одной оси есть соответствующие функции и .
С помощью них можно зеркально отразить элемент.
- — отразить по горизонтали;
- — отразить по вертикали;
- — одновременно перевернуть изображение по горизонтали и вертикали.
Rotate
Разворачивает элемент на плоскости. Например, повернет объект на 45% по часовой стрелке.
See the Pen
rotate by Андрей (@adlibi)
on CodePen.
Вы можете, например, повернуть текст на 90 градусов следующей инструкцией:
deg обозначает градус поворота.
Scew
Наклоняет элемент влево или вправо, превращая прямоугольник в параллелограмм. skew() – это сокращение, которое объединяет skewX() и skewY(), принимая оба значения.
На примере ниже к синему квадрату применено (наклон только по горизонтали), а к красному функция (наклон по обоим осям).
See the Pen
skew by Андрей (@adlibi)
on CodePen.
Примечание: при некоторых значениях углов элемент может исчезать.
Matrix
Matrix можно использовать для объединения всех преобразований в одно выражение. Но вручную создавать такие выражения невозможно. Существуют сервисы, вроде The Matrix Resolutions, которые позволяют делать такие построения.
Например через следующие две функции
будут записаны как:
Не очень удобно для человеческого восприятия, поэтому непонятно, кто будет этим пользоваться.
3D функции
Большинство описанных выше функций имеет свои 3d аналоги. Те функции, чье название содержит в конце Z, работают с осью Z. Те же, чьи названия заканчиваются на 3d принимают 3 параметра для работы со всеми тремя осями.
TranslateZ
TranslateZ сдвигают объект относительно его положения по оси Z на заданное значение. Но эффект от применения будет заметен только при использовании перспективы (perspective) и поворота элемента по осям X или Y.
Также есть общая функция translate3d.
Matrix3d
Деформация элемента в трехмерном пространстве с помощью матрицы 4х4. Как писал выше сложность применения затрудняет ее использование в ручном режиме.
ScaleZ
Масштабирование по оси Z. Но эффект будет заметен только при использовании перспективы, поворота элемента по осям X или Y, и при смещении по оси Z.
Также есть общая функция scale3d.
Rotate3d.
Определяет вращение в трехмерном пространстве.
Что она делает проще показать на примере. На демонстрации размещено 4 блока с текстом, соответствующим применяемой к элементу функцией. Угол везде использован 50deg.
К первому синему элементу не применяется никакой трансформации. Ко второму элементу применена , к третьему – , к четвертому – .
See the Pen
rotate x by Андрей (@adlibi)
on CodePen.
Значения свойства
| Значение | Описание |
|---|---|
| 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); }
Кликните на любое значение свойства, чтобы увидеть результат
Определение завершения перехода
Есть событие, срабатывающее, когда переход завершён. Во всех браузерах, совместимых со стандартами, есть событие , в WebKit есть . Смотрите таблицу поддержки браузерами для дополнительной информации. У есть 2 свойства:
- Строка, показывающая изменение какого свойства завершено.
- Число с точкой, какое количество времени переход выполнялся, до того как запустилось событие. Это значение не равно свойству (en-US).
Как обычно, используйте метод , чтобы следить за этим событием:
Замечание: Событие не произойдёт, когда переход был прерван до его завершения, например, если установили или значение анимируемого свойства изменилось
CSS Reference
CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS 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
caption-side
caret-color
@charset
clear
clip
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-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
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
object-fit
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
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
z-index
min(), max()
Функция возвращает минимальное из переданных значений, — максимальное. При использовании процентов или выбираемое значение будет динамическим и будет зависеть от внешних условий. Например:
Если поресайзить окно с примером, можно увидеть как это работает.
Если вычисленное значение для меньше , ширина блока будет равна . Как только станет больше , функция выберет меньшее значение, то есть , и дальше блок тянуться не будет.
Функция будет выбирать подходящее значение учитывая ширину окна в данный момент.
Этот код не делает ничего особенного, что не умел бы CSS без математических функций: точно такое же поведение можно получить задав и :
Оба варианта для сравнения:
Порастягивайте демо, чтобы увидеть, что разницы в поведении блоков нет.
На первый взгляд, и не делают ничего интересного, но если подумать, как много мест в CSS, где можно управлять диапазоном значений?
Это доступно только для ширины и высоты:
- , ,
- , ,
и их аналогов, привязанных к направлению письма:
- , ,
- , ,
У нас нет, например, или , но благодаря математическим функциям, можно добавить умную динамику практически в любое значение. Например, в размер шрифта:
Поресайзите демо, и вы увидите, что при растягивании шрифт будет бесконечно расти, но при сужении, как только станет меньше или равным , размер шрифта застынет на этом значении.
Если попытаться реализовать подобное на JS, пришлось бы отслеживать ресайз окна, получать вычисленное значение, и при превышении заданного порога, фиксировать значение на определённом уровне. При использовании и браузер всё делает сам: отслеживает изменение значений и, при необходимости, фиксирует их — нам нужно просто выбрать функцию и задать диапазон значений.
Это будет работать во всех свойствах, которые используют размеры, в том числе в тенях, градиентах и прочем. Пример с :
Размер тени будет зависеть от размера окна браузера, минимальное значение — .
Экспериментируя с функциями и можно заметить, что они дают возможность управлять или минимальным значением, или максимальным, но нельзя контролировать и то, и другое одновременно. Хотя совершенно логичным выглядит желание, например, задать размер шрифта, который будет расти в диапазоне от минимального значения до максимального и не выходить за эти значения.
Для такого есть ещё одна функция:
Property Values
| Value | Description | Play it |
|---|---|---|
| none | Defines that there should be no transformation | Play it » |
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values | Play it » |
| 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 | |
| translate(x,y) | Defines a 2D translation | Play it » |
| translate3d(x,y,z) | Defines a 3D translation | |
| translateX(x) | Defines a translation, using only the value for the X-axis | Play it » |
| translateY(y) | Defines a translation, using only the value for the Y-axis | Play it » |
| translateZ(z) | Defines a 3D translation, using only the value for the Z-axis | |
| scale(x,y) | Defines a 2D scale transformation | Play it » |
| scale3d(x,y,z) | Defines a 3D scale transformation | |
| scaleX(x) | Defines a scale transformation by giving a value for the X-axis | Play it » |
| scaleY(y) | Defines a scale transformation by giving a value for the Y-axis | Play it » |
| scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis | |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter | Play it » |
| rotate3d(x,y,z,angle) | Defines a 3D rotation | |
| rotateX(angle) | Defines a 3D rotation along the X-axis | Play it » |
| rotateY(angle) | Defines a 3D rotation along the Y-axis | Play it » |
| rotateZ(angle) | Defines a 3D rotation along the Z-axis | Play it » |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis | Play it » |
| skewX(angle) | Defines a 2D skew transformation along the X-axis | Play it » |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis | Play it » |
| perspective(n) | Defines a perspective view for a 3D transformed element | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Комбинация трансформаций
Типично использовать несколько преобразований за раз, к примеру, поворот и масштабирование размера элемента одновременно. В этом случае несколько преобразований могут быть скомбинированы вместе. Для их объединения значения идут списком в свойстве transform один за другим без использования запятых.
Применение нескольких деклараций transform не будет работать, так как каждая декларация перезапишет всё над ним. Поведение в этом случае такое же, как если бы вы установили height для элемента несколько раз.
Демонстрация комбинации транформаций
За каждой трансформацией также стоит матрица, явно определяющая поведение transform. Использование значений rotate, scale, transition и skew обеспечивает простой путь задать эту матрицу. Тем не менее, если вы расположены к математике и предпочитаете глубже погрузиться в преобразования, попробуйте свои силы в использовании значения matrix.
