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

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

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

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

7 ответов:

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

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

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

708

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

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

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

вращение вокруг оси 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 столько, сколько вы можете, так что в вашем случае это проблема, так что второе преобразование переопределить первый в этом случае...

так как же вы можете делать то, что вы хотите?...

Не волнуйся, преобразование принимает несколько значений одновременно время... Так что этот код ниже будет работать:

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-код для необходимых параметров преобразования с помощью графического интерфейса для генерации кода transfrom;)

enter image description here

-3