Как применить несколько преобразований в CSS?
используя CSS, как я могу применить более одного transform
?
пример: в следующем примере применяется только перевод, а не вращение.
li:nth-child(2) {
transform: rotate(15deg);
transform: translate(-20px,0px);
}
7 ответов
вы должны поставить их на одну линию, вот так:
li:nth-child(2) {
transform: rotate(15deg) translate(-20px,0px);
}
когда у вас есть несколько директив преобразования, будет применен только последний. Это как любой другой атрибут CSS.
Я добавляю этот ответ не потому, что он, вероятно, будет полезен, а просто потому, что это правда.
в дополнение к использованию существующих ответов, объясняющих, как сделать более одного перевода, связывая их, вы также можете построить матрицу 4x4 самостоятельно
Я схватил следующее изображение из какой-то случайный сайт, который я нашел во время googling, который показывает матриц вращения:
вращение вокруг оси x:
Вращение вокруг оси Y:
Вращение вокруг оси Z:
Я не мог найти хороший пример перевода, поэтому, предполагая, что я помню / понимаю его правильно, перевод:
[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[x y z 1]
Подробнее см. в статья Википедии о трансформации а также учебник Pragamatic CSS3 что объясняет его довольно хорошо. Другое руководство, которое я нашел, которое объясняет произвольные матрицы вращения, -заметки Эгона Рата о матрицы
умножение матрицы работает между этими матрицами 4x4, конечно, поэтому для выполнения вращения с последующим переводом вы делаете соответствующую матрицу вращения и умножаете ее на матрицу перевода.
Это может дать вам немного больше свободы, чтобы получить его правильно, а также сделает его практически полностью невозможным для кого-либо понять, что он делает, включая вас в течение пяти минут.
но, вы знаете, это завод.
Edit: я только что понял, что пропустил упоминание, вероятно, самого важного и практического использования этого, которое заключается в постепенном создании сложных 3D-преобразований с помощью JavaScript, где все будет иметь немного больше смысла.
вы также можете применить несколько преобразований, используя дополнительный слой разметки, например:
<h3 class="rotated-heading">
<span class="scaled-up">Hey!</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);
}
простой способ применить множественное преобразование-это
li:nth-of-type(2){
transform : translate(-20px, 0px) rotate(15deg);
}
но также не забывайте, что вам нужно добавить префикс, чтобы он работал во всех браузерах, как некоторые браузеры, такие как safari, т. е. не поддерживает свойство tranform без префикса.
li:nth-of-type(2){
transform : translate(-20px, 0px) rotate(15deg);
-moz-transform : translate(-20px, 0px) rotate(15deg);
-webkit-transform : translate(-20px, 0px) rotate(15deg);
-o-transform : translate(-20px, 0px) rotate(15deg);
-ms-transform : translate(-20px, 0px) rotate(15deg);
}
просто начните оттуда, что в в CSS, если вы повторяете 2 значения или более, всегда применяется последнее, если не используется !important
тег, но в то же время избегать использования !important
столько, сколько вы можете, поэтому в вашем случае это проблема, поэтому второе преобразование переопределить первый в этом случае...
Итак, как вы можете делать то, что хотите?...
Не волнуйся, transform принимает несколько значений одновременно время... Таким образом, этот код ниже будет работать:
li:nth-child(2) {
transform: rotate(15deg) translate(-20px, 0px); //multiple
}
если вы хотите поиграть с transform запустите iframe из MDN ниже:
<iframe src="https://interactive-examples.mdn.mozilla.net/pages/css/transform.html" class="interactive " width="100%" frameborder="0" height="250"></iframe>
посмотрите на ссылку ниже для получения дополнительной информации:
-webkit-transform: rotateX(-36.09deg) rotateY(-52.71deg) scaleX(1.3) scaleY(1.3) translateY(31px) ;
transform: rotateX(-36.09deg) rotateY(-52.71deg) scaleX(1.3) scaleY(1.3) translateY(31px) ;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
Я использую инструмент enjoycss
http://enjoycss.com/5C#transform
Он генерирует код css для требуемых параметров преобразования с помощью GUI для генерации кода transfrom;)