Як застосувати декілька перетворень у CSS?

Як за допомогою CSS можна застосувати декілька transform?

Приклад. У наступному застосовується лише переклад, а не обертання.

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

Ви повинні розмістити їх на одному рядку так:

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

буде НЕ той же результат:

.orderOne, .orderTwo {
  font-family: sans-serif;
  font-size: 22px;
  color: #000;
  display: inline-block;
}

.orderOne {
  transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
  transform: rotate(90deg) scale(1, 1.5);
}

<div class="orderOne">
  A
</div>

<div class="orderTwo">
  A
</div>

Я додаю цю відповідь не тому, що це може бути корисною, а просто тому, що це правда.

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

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

Обертання навколо осі x:
Обертання навколо осі y:
Обертання навколо осі z:

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

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

Дивіться більше у статті Вікіпедії про трансформацію , а також у навчальному посібнику Pragamatic CSS3, який досить добре пояснює це. Ще одне керівництво, яке я знайшов, що пояснює довільні матриці обертання, - це примітки Егона Рата до матриць

Матричне множення працює між цими матрицями 4x4, звичайно, тому для виконання обертання з подальшим перекладом ви робите відповідну матрицю обертання і множите її на матрицю перекладу.

Це може дати вам трохи більше свободи, щоб зрозуміти, що це правильно, а також зробить це майже абсолютно неможливим, щоб хтось зрозумів, що це робить, включаючи вас за п’ять хвилин.

Але, знаєте, це працює.

Редагувати: Я щойно зрозумів, що пропустив згадати про найважливіше і практичне використання цього, яке полягає в поетапному створенні складних 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-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 , але не може знайти нічого про поточну підтримку браузера, окрім хромованої канарки. Сподіваюся, що я повернусь і оновлю підтримку браузера тут;)

В цій статті ви знайдете інформацію, яку ви хочете перевірити щодо обходу поточних веб-переглядачів.

Почніть звідти, що в CSS , якщо ви повторите 2 значення або більше, завжди застосовується останнє, якщо ви не використовуєте !importantтег, але в той же час уникайте використання !important, наскільки це можливо, так що у вашому випадку це проблема, тож друге трансформація перекриває перший у цьому випадку ...

То як ти можеш робити те, що ти хочеш тоді? ...

Не хвилюйтеся , перетворення приймає одночасно декілька значень ... Отже, цей код працює нижче:

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

Якщо ви хочете пограти з трансформацією, запустіть iframe з MDN нижче:

<iframe src="https://interactive-examples.mdn.mozilla.net/pages/css/transform.html" class="interactive  " width="100%" frameborder="0" height="250"></iframe>

Перегляньте посилання нижче для отримання додаткової інформації:

<< CSS перетворення >>

Перетворити Поворот і перекласти в один рядок 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>