Bagaimana cara menerapkan banyak transformasi dalam CSS?

Dengan menggunakan CSS, bagaimana saya bisa menerapkan lebih dari satu transform?

Contoh: Berikut ini, hanya terjemahan yang diterapkan, bukan rotasi.

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

Anda harus meletakkannya di satu baris seperti ini:

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

Saat Anda memiliki banyak arahan transformasi, hanya yang terakhir yang akan diterapkan. Ini seperti aturan CSS lainnya.

Perlu diingat beberapa arahan mengubah satu baris diterapkan dari kanan ke kiri .

Ini: transform: scale(1,1.5) rotate(90deg);
dan:transform: rotate(90deg) scale(1,1.5);

tidak akan menghasilkan hasil yang sama:

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

Saya menambahkan jawaban ini bukan karena itu mungkin akan membantu tetapi hanya karena itu benar.

Selain menggunakan jawaban yang ada menjelaskan cara membuat lebih dari satu terjemahan dengan merantai mereka, Anda juga dapat membuat matriks 4x4 sendiri

Saya mengambil gambar berikut dari beberapa situs acak yang saya temukan saat googling yang menunjukkan matriks rotasi:

Rotasi di sekitar sumbu x:
Rotasi di sekitar sumbu y:
Rotasi di sekitar sumbu z:

Saya tidak dapat menemukan contoh terjemahan yang baik, jadi anggap saya ingat / mengerti benar, terjemahan:

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

Lihat lebih banyak di artikel Wikipedia tentang transformasi serta tutorial Pragamatic CSS3 yang menjelaskannya dengan baik. Panduan lain yang saya temukan yang menjelaskan matriks rotasi acak adalah catatan Egon Rath tentang matriks

Perkalian matriks bekerja antara matriks 4x4 ini tentu saja, jadi untuk melakukan rotasi diikuti oleh terjemahan, Anda membuat matriks rotasi yang sesuai dan mengalikannya dengan matriks terjemahan.

Ini dapat memberi Anda sedikit lebih banyak kebebasan untuk melakukannya dengan benar, dan juga akan membuat sangat mustahil bagi siapa pun untuk memahami apa yang dilakukannya, termasuk Anda dalam lima menit.

Tapi, Anda tahu, itu berhasil.

Sunting: Saya baru menyadari bahwa saya melewatkan menyebutkan mungkin penggunaan yang paling penting dan praktis dari ini, yaitu untuk secara bertahap membuat transformasi 3D yang kompleks melalui JavaScript, di mana banyak hal akan lebih masuk akal.

Anda juga dapat menerapkan beberapa transformasi menggunakan lapisan markup tambahan, misalnya:

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

Ini bisa sangat berguna ketika menjiwai elemen dengan transformasi menggunakan Javascript.

Anda dapat menerapkan lebih dari satu transformasi seperti ini:

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

Suatu saat nanti, kita dapat menulis seperti ini:

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

Ini akan menjadi sangat berguna ketika menerapkan kelas individu pada suatu elemen:

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

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

Sintaks ini didefinisikan dalam spesifikasi CSS Transforms Level 2 yang sedang berlangsung , tetapi tidak dapat menemukan apa pun tentang dukungan browser saat ini selain kenari krom. Semoga suatu hari nanti saya akan kembali dan memperbarui dukungan browser di sini;)

Temukan info di artikel ini yang mungkin ingin Anda periksa tentang solusi untuk peramban saat ini.

Mulai saja dari sana bahwa di CSS , jika Anda mengulangi 2 nilai atau lebih, selalu yang terakhir diterapkan, kecuali menggunakan !importanttag, tetapi pada saat yang sama hindari menggunakan !importantsebanyak yang Anda bisa, jadi dalam kasus Anda itulah masalahnya, jadi yang kedua transform menimpa yang pertama dalam hal ini ...

Jadi bagaimana Anda dapat melakukan apa yang Anda inginkan? ...

Jangan khawatir , mentransformasikan menerima beberapa nilai sekaligus ... Jadi kode di bawah ini akan berfungsi:

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

Jika Anda suka bermain-main dengan transform, jalankan iframe dari MDN di bawah ini:

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

Lihat tautan di bawah untuk info lebih lanjut:

<< CSS transform >>

Transform Putar dan Terjemahkan dalam satu baris css: -Bagaimana?

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>