Transformasi CSS3 tidak berfungsi

Saya mencoba mengubah item menu saya dengan memutarnya 10 derajat. CSS saya berfungsi di Firefox tetapi saya gagal meniru efeknya di Chrome dan Safari. Saya tahu IE tidak mendukung properti CSS3 ini jadi itu bukan masalah.

Saya menggunakan CSS berikut:

li a {
   -webkit-transform:rotate(10deg);
   -moz-transform:rotate(10deg);
   -o-transform:rotate(10deg); 
}

Adakah yang bisa memberi tahu di mana saya salah?

Terima kasih.

Ini hanyalah tebakan terpelajar tanpa melihat sisa HTML / CSS Anda:

Sudahkah Anda melamar display: blockatau display: inline-blockke li a? Jika tidak, cobalah.

Jika tidak, coba terapkan aturan transformasi CSS3 ke li.

Di browser berbasis webkit (Safari dan Chrome), -webkit-transform diabaikan pada elemen inline. . Atur display: inline-block;untuk membuatnya bekerja . Untuk tujuan demonstrasi / pengujian, Anda mungkin juga ingin menggunakan sudut negatif atau transformation-originteks tidak diputar keluar dari area yang terlihat.

_{Karena tidak ada yang mereferensikan dokumentasi yang relevan:}

Modul Transformasi CSS Level 1 - Terminologi - Elemen yang Dapat Diubah

Elemen yang dapat ditransformasikan adalah elemen dalam salah satu kategori berikut:

• sebuah elemen yang tata letaknya diatur oleh model kotak CSS yang merupakan elemen level-blok atau level- sebaris atom , atau yang properti tampilannya dihitung ke tabel-baris, tabel-baris-grup, tabel-header-grup, tabel-footer -group, table-cell, atau table-caption
• elemen dalam namespace SVG dan tidak diatur oleh model kotak CSS yang memiliki atribut transform, 'patternTransform', atau gradientTransform.

Dalam kasus Anda, <a>elemennya secara inlinedefault.

Mengubah nilai displayproperti untuk inline-blockmerender elemen sebagai elemen level sebaris atom , dan oleh karena itu elemen menjadi "dapat diubah" menurut definisi.

li a {
   display: inline-block;
   -webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
   -o-transform: rotate(10deg); 
   transform: rotate(10deg);
}

Seperti disebutkan di atas, ini tampaknya hanya berlaku di -webkitbrowser berbasis karena tampaknya berfungsi di IE / FF.

Apakah Anda secara khusus mencoba memutar tautan saja? Karena melakukannya pada tag LI tampaknya berfungsi dengan baik.

Menurut Snook, transformasi membutuhkan elemen yang terpengaruh menjadi blok. Dia juga punya beberapa kode di sana untuk membuat ini berfungsi untuk IE menggunakan filter, jika Anda ingin menambahkannya (meskipun tampaknya ada beberapa batasan pada nilai).

-webkit-transform tidak lagi dibutuhkan

ms sudah mendukung rotasi ( -ms-transform: rotate(-10deg);)

coba ini:

li a {
   ...

    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -sand-transform: rotate(10deg);
    display: block;
    position: fixed;
    }