Transform

Функции двухмерной трансформации transform

Свойство представляет собой набор опций, среди которых доступны разные функции трансформирования. Является не наследуемым. Разберем его подробнее:

transform
Значения:
	Служит для отмены какого-либо трансформирования элемента. Является опцией, которая устанавливается по умолчанию.
	Данное матричное преобразование представляет собой синергию (сочетание) нескольких функций трансформирования. Доступные параметры трансформирования: вращение, изменение масштаба, изменение угла наклона и местоположения контейнера. Параметр предназначен для масштабирования html-блока по горизонтальной декартовой линии координат. При происходит уменьшение, а при происходит увеличение по ширине. Параметр применяется для деформации хтмл-контейнера по вертикали. Значение применяется для деформации хтмл-контейнера по горизонтали. Переменная предназначена для масштабирования html-блока по вертикальной декартовой линии координат. При происходит уменьшение, а при происходит увеличение по ширине. Переменная в матрице задает смещение по X-ой координате. . Переменная в матрице задает смещение Y-ой координате. .
	Предназначена для смещения хтмл-блока по горизонтальной и вертикальной воображаемым осям одновременно. Входные переменные могут иметь как отрицательное, так и положительное значение. Следует отметить, что эта функция влияет только на визуальное смещение элемента, его фактическое местоположение остается тем же. То есть иными словами — сдвиг не оказывает влияние на местоположение других блоков.
	Предназначена для смещения html-блока по горизонтальной линии декартова пространства на n единиц, которые могут как в отрицательную, так и положительную стороны.
	Предназначена для смещения html-блока по вертикальной линии декартова пространства на n единиц, которые могут быть отрицательными и положительными.
	Предназначена для масштабирования элемента одновременно в двух направлениях (по ширине и высоте): x — по воображаемой горизонтальной линии, y — по воображаемой вертикальной. Оба входных значения могут быть минусовыми и плюсовыми. При минусовых величинах формируется зеркальное отображение. При 0 < x < 1 объект уменьшается, а при x > 1 увеличивается по ширине. Для y аналогично, но по высоте.
	Применяется для масштабирования (сужения, растяжения по ширине) текущего html-контейнера вдоль воображаемой горизонтальной оси декартова пространства. При 0 < n < 1 объект уменьшается, а при n > 1 увеличивается по ширине. При n = 1 хтмл-объект будет иметь реальную ширину без изменений. n может быть как положительным, так и отрицательным. При минусовых величинах объект принимает зеркальное отображение.
	Применяется для масштабирования (сужения, растяжения по высоте) текущего html-контейнера вдоль воображаемой вертикальной оси декартова пространства. При 0 < n < 1 объект уменьшается, а при n > 1 увеличивается по высоте. При n = 1 хтмл-объект будет иметь реальную высоту без изменений. n может быть как положительным, так и отрицательным. При минусовых величинах объект принимает зеркальное отображение.
	Применяется для поворота объекта на n-ое число градусов (некоторый угол). n может быть как положительным (вращение по ходу стрелки часов), так и отрицательным (вращение против хода стрелки часов). Одно полное вращение элемента равно 360 градусов. Формат записи угла: число и deg, grad, rad или turn.
	Предназначено для деформарования хтмл-элемента по x-ой и y-ой осям пространства, то есть в ширину и высоту одновременно. Формат значения: число и deg, grad или rad.
	Предназначена для деформации хтмл-контейнера по воображаемой горизонтальной оси.
	Используется для деформации хтмл-контейнера по воображаемой вертикальной оси.
	Будет установлено в первоначальное значение.
	Унаследовать правило от родителя.

Формат записи

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

Text-transform в css

❮ Previous
Next ❯

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

Адаптивный слайдер на css3

Transform: rotate

How to vertically center text with css

The CSS is for making elements move around a fixed point. By default, it rotates around the center of the element.

The following example creates an animation of rotation:

Example Copy

is for making elements rotate around the horizontal axis. The function does not deform the element. It works the same as .

The works with values. If they are positive, the element moves clockwise. Negative values make the element move in the opposite direction.

Example Copy

is for rotating an element around its vertical axis. It works the same as by accepting values and moving clockwise if the values are positive.

Example Copy

The CSS is for rotating an element around the Z-axis (3D space).

The element is rotated at the angle you specify in the brackets.

Example Copy

Событие одного элемента преобразует другой

Многих наверное заинтересует подобный функционал: клик на один элемент вызывает преобразование другого. В CSS этого можно достичь, воспользовавшись селекторами >, + и ~.

Вот и соответствующий пример:

#box1
#box2
#stage2

В этом примере мы воспользовались знаком +, чтобы взаимодействовать с #box1 и #box2. ~ может использоваться для получения доступа к элементам, которые находятся где-то далеко от элемента, ожидающего события.

#box2 {
  position: absolute;
  left: 120px;
  ...
  background: blue;
  ...
}
#box1:hover + #box2 {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
  left: 627px;
  background: yellow;
}

В то же время, мы можем анимировать и первый блок:

#box3
#box4
#stage3

Недостаток данных примеров только в том, что они не работают (или работают криво) в более ранних версиях браузеров.

Property Values

Value	Description
none	Defines that there should be no transformation
matrix(n, n, n, n, n, n)	Defines a 2D transformation, using a matrix of six values
matrix3d(n, n, n, n, etc….)	Defines a 3D transformation, using a 4×4 matrix of 16 values
translate(x, y)	Defines a 2D translation
translate3d(x, y, z)	Defines a 3D translation
translateX(x)	Defines a translation, using only the value for the X-axis
translateY(y)	Defines a translation, using only the value for the Y-axis
translateZ(z)	Defines a 3D translation, using only the value for the Z-axis
scale(x, y)	Defines a 2D scale transformation
scale3d(x, y, z)	Defines a 3D scale transformation
scaleX(x)	Defines a scale transformation by giving a value for the X-axis
scaleY(y)	Defines a 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
rotate(angle)	Defines a 2D rotation, the angle is specified in the parameter
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
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
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

CSS Учебник

CSS СТАРТCSS ВведениеCSS СинтаксисCSS СелекторыCSS Как подключитьCSS ЦветаCSS background-colorCSS borderCSS marginCSS paddingCSS height/widthCSS Блочная модельCSS КонтурCSS ТекстCSS ШрифтыCSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS displayCSS max-widthCSS positionCSS overflowCSS float/clearCSS inline-blockCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS opacity/transparencyCSS Панель навигацииCSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Селекторы атрибутовCSS ФормыCSS СчётчикиCSS Макет веб-сайтаCSS ЕдиницыCSS Специфичности

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

Перед тем как перейти к изучению следующей темы пройдите практические задания:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

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

Практическое задание № 36.

Подсказка:
- Для начала Вам необходимо спозиционировать родительский элемент и задать его детям, абсолютное позиционирование. Эту тему мы подробно рассматривали ранее в статье «Позиционирование элементов в CSS».
- Вам необходимо для двух вложенных элементов применить трансформацию с функцией rotate(), а для двух других translateY(). Кроме того, необходимо для двух элементов изменить точку начала преобразования.
- Для того, чтобы запустить трансформацию родительского элемента, после того как закончится трансформация вложенных элементов, Вам необходимо указать для всех элементов свойство эффекта перехода — transition, при том для родительского элемента необходимо задать задержку начала эффекта перехода между двумя состояниями. Эту тему мы подробно рассматривали ранее в статье «Переходные эффекты в CSS».

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

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

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

Кажется, вы используете блокировщик рекламы 🙁

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

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Как отключить?
Поддержать

Анимация в действии

Вот ещё один интересный пример комбинирования различного рода трансформаций в одной анимации:

<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

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

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-анимация

Смещение translate()

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

При использовании функции translate() с одним параметром смещение будет происходить по горизонтали (вправо — при положительных значениях, влево — при отрицательных значениях). Можно указать 2 параметра — тогда смещение будет и по горизонтали, и по вертикали одновременно. Для того чтобы сместить элемент по одной из осей, можно использовать функции translateX() или translateY() для горизонтального и вертикального смещения:

transform: translate()

.box1 {
transform: translate(-45px);
}
.box2 {
transform: translate(20%, 20%);
}
.box3 {
transform: translateX(2em);
}
.box4 {
transform: translateY(3rem);
}
.box5 {
transition: transform .7s;
}
.box5:hover {
transform: translate(3rem, 2em);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.box1{

transformtranslate(-45px);

}

.box2{

transformtranslate(20%,20%);

}

.box3{

transformtranslateX(2em);

}

.box4{

transformtranslateY(3rem);

}

.box5{

transitiontransform.7s;

}

.box5hover{

transformtranslate(3rem,2em);

}

See the Pen CSS-property transform: translate() by Elen (@ambassador) on CodePen.dark

Функции сдвига

С помощью -функций можно переместить элемент по горизонтали или по вертикали вдоль осей X и Y:

CSS

transform: translateX(50px); /* 50px вправо */
transform: translateY(-100%); /* 100% вверх */
transform: translate(50px, -100%); /* одновременно */

1
2
3
4
5

transformtranslateX(50px);/* 50px вправо */

transformtranslateY(-100%);/* 100% вверх */

transformtranslate(50px,-100%);/* одновременно */

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

Для сдвига в третьем направлении существует :

CSS

transform: translateZ(-200px); /* 200px вглубь экрана */

1
2
3

transformtranslateZ(-200px);/* 200px вглубь экрана */

Возьмем три элемента – , и – и спозиционируем их абсолютно в одной точке. К применим , а к – . Результат довольно скучный:

Повернем весь родительский контейнер по z-оси, чтобы понять, что происходит:

CSS

#scene {
transform-style: preserve-3d;
transform: rotateX(-10deg) rotateY(-10deg);
}

1
2
3
4
5
6

#scene {

transform-stylepreserve-3d;

transformrotateX(-10deg)rotateY(-10deg);

}

Функция позволяет сдвинуть элемент по всем трем осям одновременно:

CSS

transform: translate3d(50px, 100%, 7em);

1
2
3

transformtranslate3d(50px,100%,7em);

Функция perspective()

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

Итак, данная функция задает расстояние между плоскостью экрана и точкой сходимости линий. Масштабирование элемента пропорционально d/(d – Z), где d (значение перспективы) — это расстояние от графической плоскости до предполагаемого положения глаз зрителя:

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

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

Ниже показаны примеры того, как выглядят элементы с перспективой и без:

Perspective-origin — точка отсчета

Для перспективы можно изменить точку отсчета при помощи свойства . Оно словно задает точку расположения зрителя при взгляде на перспективу. По умолчанию эта точка находится в центре элемента, но можно определить координаты точки по осям X и Y, из которой наблюдатель будет смотреть на дочерние элементы:

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 ❯

Transforming a FrameworkElement

To apply transformations to a FrameworkElement, create a Transform and apply it to one of the two properties that the FrameworkElement class provides:

LayoutTransform – A transform that is applied before the layout pass. After the transform is applied, the layout system processes the transformed size and position of the element.
RenderTransform – A transform that modifies the appearance of the element but is applied after the layout pass is complete. By using the RenderTransform property instead of the LayoutTransform property, you can obtain performance benefits.

Which property should you use? Because of the performance benefits that it provides, use the RenderTransform property whenever possible, especially when you use animated Transform objects. Use the LayoutTransform property when scaling, rotating, or skewing and you need the parent of the element to adjust to the transformed size of the element. Note that, when they are used with the LayoutTransform property, TranslateTransform objects appear to have no effect on elements. That is because the layout system returns the translated element to its original position as part of its processing.

For additional information about layout in Windows Presentation Foundation (WPF), see Layout overview.

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