it-swarm.com.ru

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

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

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

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

Вы должны поместить их в одну строку следующим образом:

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

не даст тот же результат: https://jsfiddle.net/852hzq9w/

769
lukad

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

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

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

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

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

Но, вы знаете, это работает.

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

37
Jeff

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

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

20
richtelford

Вы можете применить более одного преобразования следующим образом:

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

Когда-нибудь в будущем мы можем написать это так:

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

Это станет особенно полезным при применении отдельных классов к элементу:

<div class="teaser important"></div>

.teaser{rotate:10deg;}
.important{scale:1.5 1.5;}

Этот синтаксис определен в спецификации CSS Transforms Level 2 , но не может найти ничего о текущей поддержке браузера, кроме Chrome Canary. Надеюсь, что когда-нибудь я вернусь и обновлю поддержку браузера здесь;)

В этой статье вы можете найти информацию, которую вы можете проверить относительно обходных путей для текущих браузеров.

2
schellmax

Transform Rotate и Translate в одну строку css: -Как?

div.className{
    transform : rotate(270deg) translate(-50%, 0);    
    -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%;
    }
<html>
<head>
</head>
<body>
<div class="className">
  <span style="font-size:50px">A</span>
</div>
</body>
</html>

0
Vinkal

Просто начните с того, что в CSS, если вы повторяете 2 или более значений, всегда применяется последнее из них, если только не используется тег !important, но в то же время избегайте использования !important как можно чаще, поэтому в в этом случае проблема, поэтому второй преобразователь override первый в этом случае ...

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

Не беспокойтесь, 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>

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

<< CSS трансформация >>

0
Alireza