Как применить несколько преобразований в CSS?

используя CSS, как я могу применить более одного transform?

пример: в следующем примере применяется только перевод, а не вращение.

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}
416
css css3 transform

7 ответов

вы должны поставить их на одну линию, вот так:

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

когда у вас есть несколько директив преобразования, будет применен только последний. Это как любой другой атрибут CSS.

708

Я добавляю этот ответ не потому, что он, вероятно, будет полезен, а просто потому, что это правда.

в дополнение к использованию существующих ответов, объясняющих, как сделать более одного перевода, связывая их, вы также можете построить матрицу 4x4 самостоятельно

Я схватил следующее изображение из какой-то случайный сайт, который я нашел во время googling, который показывает матриц вращения:

вращение вокруг оси x:Rotation around x axis
Вращение вокруг оси Y: Rotation around y axis
Вращение вокруг оси Z: Rotation around z axis

Я не мог найти хороший пример перевода, поэтому, предполагая, что я помню / понимаю его правильно, перевод:

[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[x y z 1]

Подробнее см. в статья Википедии о трансформации а также учебник Pragamatic CSS3 что объясняет его довольно хорошо. Другое руководство, которое я нашел, которое объясняет произвольные матрицы вращения, -заметки Эгона Рата о матрицы

умножение матрицы работает между этими матрицами 4x4, конечно, поэтому для выполнения вращения с последующим переводом вы делаете соответствующую матрицу вращения и умножаете ее на матрицу перевода.

Это может дать вам немного больше свободы, чтобы получить его правильно, а также сделает его практически полностью невозможным для кого-либо понять, что он делает, включая вас в течение пяти минут.

но, вы знаете, это завод.

Edit: я только что понял, что пропустил упоминание, вероятно, самого важного и практического использования этого, которое заключается в постепенном создании сложных 3D-преобразований с помощью JavaScript, где все будет иметь немного больше смысла.

33

вы также можете применить несколько преобразований, используя дополнительный слой разметки, например:

<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.

15

вы можете применить более одного преобразования, как это:

li:nth-of-type(2){
    transform : translate(-20px, 0px) rotate(15deg);
}
13

простой способ применить множественное преобразование-это

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);
}
0

просто начните оттуда, что в в 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>

посмотрите на ссылку ниже для получения дополнительной информации:

>

0
-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;)

enter image description here

-3