Здравствуйте уважаемые начинающие веб-мастера.
Редкая анимация обходится без свойства 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?