Rumah  >  Soal Jawab  >  teks badan

Bagaimana untuk menggunakan pelbagai transformasi dalam CSS?

<p>Bagaimana cara saya menggunakan berbilang <kod>mengubah</code> </p> <p>Contoh: Yang berikut hanya menggunakan terjemahan, bukan putaran. </p> <pre class="brush:php;toolbar:false;">li:nth-child(2) { mengubah: berputar (15deg); transform: translate(-20px,0px); }</pre> <p><br /></p>
P粉066224086P粉066224086435 hari yang lalu638

membalas semua(3)saya akan balas

  • P粉081360775

    P粉0813607752023-09-01 12:18:08

    Saya menambah jawapan ini bukan kerana ia mungkin membantu, tetapi kerana ia benar.

    Selain menggunakan jawapan sedia ada untuk menerangkan cara melakukan pelbagai terjemahan melalui pautan, anda boleh membina matriks 4x4 sendiri

    Saya menunjukkan matriks putaran daripada beberapa tapak rawak yang saya temui semasa menggoog:

    Putar mengelilingi paksi-x:
    Putar mengelilingi paksi-y:
    Putar mengelilingi paksi z:

    Saya tidak menemui contoh terjemahan yang baik, jadi dengan mengandaikan saya ingat/faham dengan betul, terjemahannya:

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

    Lihat artikel Wikipedia tentang transformasi dan Tutorial CSS3 Pragamatik yang menerangkan perkara ini dengan sangat baik. Panduan lain yang saya temui yang menerangkan matriks putaran arbitrari ialah nota Egon Rath pada matriks

    Sudah tentu, pendaraban matriks boleh dilakukan antara matriks 4x4 ini, jadi untuk melakukan putaran dan terjemahan anda perlu mencipta matriks putaran yang sesuai dan mendarabkannya dengan matriks terjemahan.

    Ini memberi anda lebih kebebasan untuk melakukannya dengan betul, dan juga menjadikannya hampir mustahil untuk sesiapa sahaja memahami perkara yang dilakukannya, termasuk anda selama lima minit.

    Tetapi, anda tahu, ia berkesan.

    Sunting: Saya baru menyedari bahawa saya mungkin terlepas penggunaan yang paling penting dan praktikal, iaitu langkah demi langkah mencipta transformasi 3D yang kompleks melalui JavaScript, di mana perkara itu akan menjadi lebih masuk akal.

    balas
    0
  • P粉231112437

    P粉2311124372023-09-01 09:44:56

    Anda perlu meletakkannya pada satu baris seperti ini:

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

    Apabila anda mempunyai berbilang arahan transformasi, hanya yang terakhir digunakan. Sama seperti peraturan CSS yang lain.


    Ingat, pelbagai transformasi dalam satu baris digunakan dari kanan ke kiri.

    Ini:变换:scale(1,1.5)rotate(90deg);
    dan: 变换:旋转(90deg)缩放(1,1.5);

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

    balas
    0
  • Batalbalas