Как применить несколько трансформаций в CSS?
Задача: Как с помощью CSS применить более одной трансформации с использованием свойства transform?
Пример: В следующем коде применяется только трансляция, а вращение игнорируется.
li:nth-child(2) {
transform: rotate(15deg);
transform: translate(-20px, 0px);
}
Как можно исправить код, чтобы обе трансформации (вращение и трансляция) применялись одновременно?
5 ответ(ов)
Вы также можете применить несколько преобразований, используя дополнительный уровень разметки, например:
<h3 class="rotated-heading">
<span class="scaled-up">Привет!</span>
</h3>
<style type="text/css">
.rotated-heading {
transform: rotate(10deg);
}
.scaled-up {
transform: scale(1.5);
}
</style>
Это может быть действительно полезно при анимации элементов с помощью преобразований в Javascript.
Вы можете применить несколько трансформаций следующим образом:
li:nth-of-type(2) {
transform: translate(-20px, 0px) rotate(15deg);
}
В этом примере к элементу списка второго типа применяется одновременно сдвиг и поворот. Вы можете добавлять другие трансформации, разделяя их пробелами внутри свойства transform.
Извлечённый урок.
Если вы используете стиль CSS в React, не добавляйте точку с запятой, даже в конце, так как она автоматически добавляется React.
Пример правильного использования:
style={
transform: "rotate(90deg) scaleX(-1)"
}
Этот код CSS применяет два трансформации к элементу li, который является вторым дочерним элементом: он поворачивается на 15 градусов и смещается на -20 пикселей по оси X.
Имейте в виду, что трансформации в CSS могут быть применены одновременно, и порядок их применения может влиять на результат. В данном случае:
li:nth-child(2) {
transform: rotate(15deg) translate(-20px, 0px);
}
означает, что элемент сначала поворачивается на 15 градусов, а затем сдвигается на -20 пикселей по оси X (влево) и на 0 пикселей по оси Y (без вертикального смещения). Для получения дополнительной информации о множественных трансформациях в CSS вы можете ознакомиться с этой статьей: W3Docs.
Чтобы выполнить одновременно поворот и перемещение элемента в CSS, вы можете использовать свойство transform, указав необходимые функции (rotate и translate) в одной строке. Вот как это сделать:
div.className {
transform: rotate(270deg) translate(-50%, -50%);
-webkit-transform: rotate(270deg) translate(-50%, -50%); /* Для поддержки старых браузеров */
-moz-transform: rotate(270deg) translate(-50%, -50%);
-ms-transform: rotate(270deg) translate(-50%, -50%);
-o-transform: rotate(270deg) translate(-50%, -50%);
float: left;
position: absolute;
top: 50%;
left: 50%;
}
Обратите внимание, что при подобном использовании translate значения переводят элемент: первое значение по оси X, а второе — по оси Y. В вашем первоначальном коде значение translate(-50%, 0) было указано неправильно, если вы хотите, чтобы элемент смещался по обеим осям относительно его центра. Правильное значение — translate(-50%, -50%).
Пример HTML остаётся без изменений:
<html>
<head>
</head>
<body>
<div class="className">
<span style="font-size:50px">A</span>
</div>
</body>
</html>
Эта конструкция позволит вам поворачивать и перемещать элемент в одном выражении CSS.
Как расположить div внизу своего контейнера?
Медиа-запросы: Как нацелиться на десктоп, планшет и мобильные устройства?
Как отключить перенос строк в HTML?
Установить фиксированную ширину столбца таблицы независимо от количества текста в ячейках?
Как сделать перенос строки с помощью CSS, не используя <br />?