CSS перемещение, вращение, 3D

Здравствуйте уважаемые начинающие веб-мастера.

Редкая анимация обходится без свойства transform. Давайте подробно рассмотрим все возможности этого удивительного инструмента CSS, для чего и как он применяется.

Все последующие примеры будут работать при наведении курсора, чтобы Вы могли посмотреть действие свойства transform

За основу возьмём блок <div> прямоугольной формы.

HTML:

<div></div>

CSS:
.div {
width: 150px;
height: 100px;
border: 2px solid #333;
border-radius: 5px;
background: #463E48;
}

В этот css код будем подставлять свойство transform с функциями (значениями) которые оно выполняет.

Уменьшение — увеличение

а) transform: scale(0.5); — масштабирует элемент по горизонтали и вертикали. Число больше единицы увеличивает; элемент, а меньше единицы — уменьшает.

 

б) transform: scaleX(0.5); — масштабирует элемент по горизонтали;

 

в) transform: scaleY(0.5); — масштабирует элемент по вертикали;

 

Наклоны

а) transform: skewX(30deg); — наклоняет элемент на заданный угол по вертикали (в данном случае на 30°). Отрцательное значение наклоняет элемент в другую сторону;

 

б) transform: skewY(30deg); — наклоняет элемент на заданный угол по горизонтали;

 

Перемещение

а) transform: translate(50px); — сдвигает элемент на заданное значение по горизонтали и вертикали;

 

б) transform: translateX(50px); — сдвигает элемент по горизонтали. Положительное значение сдвигает вправо, отрицательное влево.

 

в) transform: translateY(50px); — сдвигает элемент по вертикали. Положительное значение сдвигает вниз, отрицательное значение вверх;

 

Вращение

а) transform: rotate(45deg); — поворот элемента вокруг центра (по умолчанию) на заданный угол;

 

б) transform: rotateY(360deg); — поворот элемента вокруг вертикальной оси. Применяется в 3D и об этом ниже;

в) transform: rotateX(360deg); — поворот элемента вокруг горизонтальной оси. Применяется в 3D;

Отражение

transform: matrix(); — создаёт эффект отражения элемента.

makak
makak

 

Для эффекта отражения в <div> добавляются два изображения, одно из которых будет отражением другого.

HTML:

<div><img src="images/makak.jpg" alt=""><br>
<img src="images/makak.jpg" alt="" class="reflect">
</div>

CSS:

.reflect {
transform: matrix(1, 0, 0, -1, 0, 0);
opacity: 0.5;
}

Вид отражения можно менять изменяя комбинацию первых четырёх цифр меняя их от 1 до -1. Пятая цифра двигает элемент по оси Х, шестая по оси Y.

3D

transform-style: preserve-3d; — создаёт 3D эффект.

 

 

HTML
<div class="main-box">
<div class="interior outer"></div>
</div>
CSS
/*Создаём бокс для двух элементов*/
.main-box {
width: 100px;
height: 100px;
border: 2px solid #463E48;
/* Подключаем свойство transform-style для 3D */
transform-style: preserve-3d;
/* Подключаем анимацию для вращения и обзора */
animation: main-rotate 10s infinite linear;
}
/* Наружний квадрат */
.outer {
position: absolute;
width: 100px;
height: 100px;
/* Прозрачность для лучшего визуального восприятия */
opacity: 0.7;
}
/*Внутренний квадрат*/
.interior {
/* Отодвигаем внурь и уменьшаем масштаб */
transform: translateZ(-5em) scale(0.8);
background: #463E48;
}
/* Анимация вращение вокруг вертикальной оси*/
@keyframes main-rotate {
100% {
transform: rotateY(360deg);
}
}

Точка координат

transform-origin: x y z; — задаёт координаты точки относительно центра, вокруг которой будет вращаться элемент.

В плоскости используются два значения (x y), в 3D три значения (x y z)

Вот примерно так всё и делается.

Теперь Вы можете к элементу подключить анимацию с заданным временем исполнения, а затем в правиле @keyframes указать свойство transform с нужной функцией в начале и в конце цикла.

Например: элемент будет постепенно наклоняться в течении анимации

@keyframes main-rotate {
0% {
transform: skewY(0);
}
100% {
transform: skewY(30deg);
}

Желаю творческих успехов.

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.
А так же:

4 комментария на «CSS перемещение, вращение, 3D»

  1. stariс говорит:

    Уберите border и останется только вращающийся внутренний квадрат

  2. Сергей говорит:

    Подскажите, как сделать так, чтобы только внутренний квадрат вращался?

  3. stariс говорит:

    В :hover подставь transform: translateY(100px), а transition: убери. Потом через @keyframes можно плавность перемещения задать. Ещё наверно есть способы, но извини, у меня 3 срочных проекта — зашиваюсь.

  4. Борис говорит:

    Все вроде бы просто, но эффекта нет. Только сам квадрат. Куда правильно подставлять transform?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *