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

transform: none;

Убирает трансформацию у элемента

<style>
.example-1 {
    width: 50px;
    height: 50px;
    background: #f55454;   
    transform: none;
}
</style>

<div class="example-1"></div>

transform: scaleX(2);

Задает масштаб элемента по оси X относительно его размеров. scaleX(2) увеличит элемент в два раза по ширине (ось X). Можно использовать отрицательные значения, тогда элемент будет отображаться зеркально по оси X и масштабироваться в таком виде

<style>
.example-2 {
    width: 50px;
    height: 50px;
    background: #f55454;   
    transform: scaleX(2);
}
</style>

<div class="example-2"></div>

transform: scaleY(2);

Задает масштаб элемента по оси Y относительно его размеров. scaleY(2) увеличит элемент в два раза по высоте (ось Y). Можно использовать отрицательные значения, тогда элемент будет отображаться зеркально по оси Y и масштабироваться в таком виде

<style>
.example-3 {
    width: 50px;
    height: 50px;
    background: #f55454;   
    transform: scaleY(2);
}
</style>

<div class="example-3"></div>

transform: scale(2);

Задает масштаб элемента по оси X и Y относительно его размеров. scale(2) увеличит элемент в два раза. Можно использовать отрицательные значения, тогда элемент будет отображаться зеркально по оси X и Y и масштабироваться в таком виде.

Можно задавать два параметра, каждой оси отдельно: scale(2, 2);

<style>
.example-4 {
    width: 50px;
    height: 50px;
    background: #f55454;   
    transform: scale(2);
}
</style>

<div class="example-4"></div>

transform: rotate(45deg);

Вращает элемент по оси Z. Доступные значения: deg 0-360deg, grad 0-400grad, turn 0-1turn. По умолчанию ось Z находится в центре элемента, данную позицию можно менять при помощи свойства transform-origin

<style>
.example-5 {
    width: 100px;
    height: 100px;
    background: #f55454;   
    transform: rotate(45deg);
}
</style>

<div class="example-5"></div>

transform: rotateX(45deg);

Вращает элемент по оси X. Доступные значения: deg 0-360deg, grad 0-400grad, turn 0-1turn. По умолчанию ось X проходит по центру элемента, данную позицию можно менять при помощи свойства transform-origin

<style>
.example-6 {
    width: 100px;
    height: 100px;
    background: #f55454;   
    transform: rotateX(45deg);
}
</style>

<div class="example-6"></div>

transform: rotateY(45deg);

Вращает элемент по оси Y. Доступные значения: deg 0-360deg, grad 0-400grad, turn 0-1turn. По умолчанию ось Y проходит по центру элемента, данную позицию можно менять при помощи свойства transform-origin

<style>
.example-7 {
    width: 100px;
    height: 100px;
    background: #f55454;   
    transform: rotateY(45deg);
}
</style>

<div class="example-7"></div>

transform: rotateZ(45deg);

Вращает элемент по оси Z. Доступные значения: deg 0-360deg, grad 0-400grad, turn 0-1turn. По умолчанию ось Z находится в центре элемента, данную позицию можно менять при помощи свойства transform-origin

<style>
.example-8 {
    width: 100px;
    height: 100px;
    background: #f55454;   
    transform: rotateZ(45deg);
}
</style>

<div class="example-8"></div>

transform: rotate3d(1, 1, 1, 45deg);

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

rotate3d(1, 1, 1, 45deg); - вращает элемент по осям X, Y, Z на 45 градусов

rotate3d(0, 1, 1, 45deg); - Вращает элемент по осям Y, Z на 45 градусов

rotate3d(2, 1, 1, 45deg); - Вращает элемент по осям Y, Z на 45 градусов и по оси X на 90 градусов (45*2)

<style>
.example-88 {
    width: 100px;
    height: 100px;
    background: #f55454;   
    transform: rotate3d(1, 1, 1, 45deg);
}
</style>

<div class="example-88"></div>

transform: skewX(25deg);

Наклон элемента по оси X в градусах deg 0-360. Можно использовать отрицательные значения

<style>
.example-9 {
    width: 100px;
    height: 100px;
    background: #f55454;   
    transform: skewX(25deg);
}
</style>

<div class="example-9"></div>

transform: skewY(25deg);

Наклон элемента по оси Y в градусах deg 0-360. Можно использовать отрицательные значения

<style>
.example-10 {
    width: 100px;
    height: 100px;
    background: #f55454;   
    transform: skewY(25deg);
}
</style>

<div class="example-10"></div>

transform: skew(25deg, 25deg);

Наклон элемента по оси X, Y в градусах deg 0-360. Можно использовать отрицательные значения

<style>
.example-11 {
    width: 100px;
    height: 100px;
    background: #f55454;   
    transform: skew(25deg, 25deg);
}
</style>

<div class="example-11"></div>

transform: translateX(10px);

Смещение элемента по оси X. Возможные единицы: px, em, rem, %, vh, vw. Можно использовать отрицательные значения

<style>
.example-12 {
    background: #d4ebf9;   
}
.example-12-item {
    width: 150px;
    height: 150px;
    background: #f55454;   
    transform: translateX(10px);
}
</style>

<div class="example-12">
    <div class="example-12-item"></div>
</div>

transform: translateY(10px);

Смещение элемента по оси Y. Возможные единицы: px, em, rem, %, vh, vw. Можно использовать отрицательные значения

<style>
.example-13 {
    background: #d4ebf9;   
}
.example-13-item {
    width: 150px;
    height: 150px;
    background: #f55454;   
    transform: translateY(10px);
}
</style>

<div class="example-13">
    <div class="example-13-item"></div>
</div>

transform: translate(25px, 50px);

Смещение элемента по оси X, Y. Возможные единицы: px, em, rem, %, vh, vw. Можно использовать отрицательные значения

<style>
.example-14 {
    background: #d4ebf9;   
}
.example-14-item {
    width: 150px;
    height: 150px;
    background: #f55454;   
    transform: translate(25px, 50px);
}
</style>

<div class="example-14">
    <div class="example-14-item"></div>
</div>

transform: translate3d(50px, 100px, 0);

Смещение элемента по оси X, Y, Z. Возможные единицы: px, em, rem, %, vh, vw. Можно использовать отрицательные значения

<style>
.example-15 {
    background: #d4ebf9;   
}
.example-15-item {
    width: 150px;
    height: 150px;
    background: #f55454;   
    transform: translate3d(50px, 100px, 0);
}
</style>

<div class="example-15">
    <div class="example-15-item"></div>
</div>

Свойство transform

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

Значения

Читайте также

Обсуждение (0)