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