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

443

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

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

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

9 ответов

789
Лучший ответ

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

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/

Поделиться
  • 47
    Я попытался разделить их на "," как это было сделано с несколькими тенями, но это не сработало. Спасибо.
  • 1
    Можно ли применить одно преобразование перед другим ... как перекос перед поворотом. Что касается меня, независимо от того, что я делаю, элемент сначала поворачивается, а затем наклоняется, что приводит к тому, что я не хочу этого.
Показать ещё 7 комментариев
36

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

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

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

Вращение вокруг оси x: Изображение 4938
Вращение вокруг оси y: Изображение 4939
Вращение вокруг оси z: Изображение 4940

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

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

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

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

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

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

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

Поделиться
  • 3
    «Случайный сайт» на mines.edu, к сожалению, теперь является мертвой ссылкой.
  • 1
    Как ссылка 9elements :(
Показать ещё 6 комментариев
19

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

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

Поделиться
  • 0
    Вы забыли transform-style: preserve-3d
  • 0
    Это не важно для вложенных 2d преобразований - зависит от желаемого результата. Transform-origin, скорее всего, пригодится.
16

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

li:nth-of-type(2){
    transform : translate(-20px, 0px) rotate(15deg);
}
Поделиться
3

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

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. Надеюсь, что когда-нибудь я вернусь и обновлю поддержку браузера здесь;)

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

Поделиться
0

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

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

Просто начните с того, что в 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>

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

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

Поделиться
0

Простым способом применения множественного преобразования является

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

Но также не забывайте, что вам нужно добавить префикс, чтобы он работал во всех браузерах, как некоторые браузеры, такие как сафари, IE не поддерживает свойство 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);
}
Поделиться
  • 6
    -moz-transform и -o-transform не нужны уже около 5 лет! И -ms-transform расширит совместимость только с Windows Vista, которой больше нет. Я просто ненавижу, когда люди тратят драгоценное пространство с бесполезными презумптивными префиксами браузера. Это просто заставляет меня хотеть рвать.
  • 4
    @lolzerywowzery рвать тогда
-4

Например

-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 для генерации кода трансфлота;)

Изображение 4941

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню