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(); — создаёт эффект отражения элемента.

 

Для эффекта отражения в <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);
     }

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