Здравствуйте уважаемые начинающие веб-мастера.
Редкая анимация обходится без свойства 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); }
Желаю творческих успехов.
Уберите border и останется только вращающийся внутренний квадрат
Подскажите, как сделать так, чтобы только внутренний квадрат вращался?
В :hover подставь transform: translateY(100px), а transition: убери. Потом через @keyframes можно плавность перемещения задать. Ещё наверно есть способы, но извини, у меня 3 срочных проекта — зашиваюсь.
Все вроде бы просто, но эффекта нет. Только сам квадрат. Куда правильно подставлять transform?