Используя CSS, как я могу применить более одного transform
?
Пример: далее применяется только перевод, а не вращение.
li:nth-child(2) {
transform: rotate(15deg);
transform: translate(-20px,0px);
}
Используя CSS, как я могу применить более одного transform
?
Пример: далее применяется только перевод, а не вращение.
li:nth-child(2) {
transform: rotate(15deg);
transform: translate(-20px,0px);
}
Вы должны поместить их в одну строку следующим образом:
li:nth-child(2) {
transform: rotate(15deg) translate(-20px,0px);
}
Когда у вас есть несколько директив преобразования, будет применена только последняя. Это как любое другое правило CSS.
Имейте в виду, что множественные однострочные директивы преобразования применяются справа налево .
Это: transform: scale(1,1.5) rotate(90deg);
и:transform: rotate(90deg) scale(1,1.5);
будет не тот же результат:
.orderOne, .orderTwo {
font-family: sans-serif;
font-size: 22px;
color: #000;
display: inline-block;
}
.orderOne {
transform: scale(1, 1.5) rotate(90deg);
}
.orderTwo {
transform: rotate(90deg) scale(1, 1.5);
}
<div class="orderOne">
A
</div>
<div class="orderTwo">
A
</div>
transform: scale(1,1.5) rotate(90deg);
что поворот произойдет до масштаба.Я добавляю этот ответ не потому, что он может быть полезен, а просто потому, что это правда.
Помимо использования существующих ответов, объясняющих, как сделать более одного перевода, связав их по цепочке, вы также можете построить матрицу 4x4 самостоятельно.
Я взял следующее изображение из некоторого случайного сайта, который я нашел во время поиска в Google, который показывает матрицы вращения:
Вращение вокруг оси x:
Вращение вокруг оси y:
вращение вокруг оси z:
Я не смог найти хороший пример перевода, так что, если я правильно помню / понимаю, перевод:
Смотрите больше в статье Википедии о трансформации, а также в учебнике Pragamatic CSS3, который объясняет это довольно хорошо. Другое руководство, которое я нашел, которое объясняет произвольные матрицы вращения: заметки Эгона Рата о матрицах
Конечно, умножение матриц работает между этими матрицами 4x4, поэтому для выполнения поворота с последующим переводом необходимо создать соответствующую матрицу поворота и умножить ее на матрицу перевода.
Это может дать вам немного больше свободы, чтобы сделать все правильно, а также сделает практически невозможным для любого понять, что он делает, включая вас за пять минут.
Но, вы знаете, это работает.
Редактировать: я только что понял, что пропустил упоминание, вероятно, самого важного и практического использования этого, которое заключается в постепенном создании сложных трехмерных преобразований с помощью JavaScript, где вещи будут иметь немного больше смысла.
источник
Вы также можете применить несколько преобразований, используя дополнительный слой разметки, например:
Это может быть очень полезно при анимации элементов с помощью Javascript.
источник
transform-style: preserve-3d
Вы можете применить более одного преобразования следующим образом:
источник
Когда-нибудь в будущем мы можем написать это так:
Это станет особенно полезным при применении отдельных классов к элементу:
Этот синтаксис определен в текущей спецификации CSS Transforms Level 2 , но не может найти ничего о текущей поддержке браузера, кроме Chrome Canary. Надеюсь, что когда-нибудь я вернусь и обновлю поддержку браузера здесь;)
В этой статье вы найдете информацию, которую вы можете проверить относительно обходных путей для текущих браузеров.
источник
Просто начните с того, что в CSS , если вы повторяете 2 или более значений, всегда применяется последнее из них, если только вы не используете
!important
тег, но в то же время избегайте использовать!important
столько, сколько можете, поэтому в вашем случае это проблема, поэтому второе преобразование переопределить первый в этом случае ...Так как же тогда вы можете делать то, что хотите? ...
Не беспокойтесь , transform принимает несколько значений одновременно ... Так что этот код ниже будет работать:
Если вам нравится играть с transform, запустите iframe из MDN ниже:
Посмотрите на ссылку ниже для получения дополнительной информации:
<< CSS трансформация >>
источник
Transform Rotate и Translate в одну строку css: -Как?
источник