Трансформации

Что такое трансформации?

• transform - позволяет визуально изменять элементы (вращать, перемещать, масштабировать и искажать их).

Функции transform

translate

• translate(x, y) - смещает элемент по осям x и y;
• translate(x) - смещает элемент по оси x;
• translate(y) - смещает элемент по оси y;

Например. Изменим файл index.html:

index.html

<div class="translate">translate(50px, 20px)</div>

Изменим файл styles.css:

styles.css

.translate {
    border: 1px solid grey;
    width: 300px;
    padding: 20px;
    background: lightblue;
    transform: translate(50px, 20px);
}

rotate

• rotate(a) - вращение элемента (в градусах);

Например. Изменим файл index.html:

index.html

<div class="rotate">rotate(30deg)</div>

Изменим файл styles.css:

styles.css

.rotate {
    border: 1px solid grey;
    width: 200px;
    margin: 80px 0 0 30px;
    padding: 20px;
    background: lightblue;
    transform: rotate(25deg);
}

scale

• scale(x, y) - масштабирует элемент по осям x и y;
• scale(x) - масштабирует элемент по оси x;
• scale(y) - масштабирует элемент по оси y;

Например. Изменим файл index.html:

index.html

<div class="scale">scale(1.5)</div>

Изменим файл styles.css:

styles.css

.scale {
    border: 1px solid grey;
    width: 200px;
    margin: 80px 0 0 100px;
    padding: 20px;
    background: lightblue;
    transform: scale(1.5);
}

skew

• skew(x, y) - искажает (наклоняет) элемент по осям x и y;
• skew(x) - искажает элемент по оси x;
• skew(y) - искажает элемент по оси y;

Например. Изменим файл index.html:

index.html

<div class="skew">skew(20deg, 10deg)</div>

Изменим файл styles.css:

styles.css

.skew {
    border: 1px solid grey;
    width: 200px;
    margin: 80px 0 0 100px;
    padding: 20px;
    background: lightblue;
    transform: skew(20deg, 10deg);
}

transform-origin

• transform-origin - определяет точку начала трансформации (по умолчанию центр элемента);

Например. Изменим файл index.html:

index.html

<div class="box">Я вращаюсь от левого края</div>

Изменим файл styles.css:

styles.css

.box {
    width: 100px;
    height: 100px;
    background: lightblue;
    border: 1px solid grey;
    margin: 20px 0 0 60px;
    padding: 20px;
    transform-origin: left center;
    transform: rotate(30deg);
}

perspective

• perspective - добавляет перспективу для 3D-трансформаций;

Например. Изменим файл index.html:

index.html

<div class="scene">
    <div class="cube1">1</div>
    <div class="cube2">2</div>
    <div class="cube3">3</div>
    <div class="cube4">4</div>
</div>

Изменим файл styles.css:

styles.css

.scene {
    border: 1px solid #888;
    padding: 40px;
    display: flex;
    perspective: 800px;
}

.cube1,
.cube2,
.cube3,
.cube4 {
    width: 150px;
    height: 150px;
    background: lightseagreen;
    color: white;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 800px;
    transform: rotateY(45deg);
}