Transformasi CSS3 tidak berfungsi

122

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.

html css

— shruti
sumber

2

FYI, IE memang mendukung properti CSS3 ini, Anda hanya perlu awalan:-ms-transform:rotate(10deg);

— Joshua Pinter

Kemungkinan duplikat dari transformasi CSS tidak bekerja pada elemen sebaris

— mems

2

Karena belum ada yang menyebutkan ini, sejak tahun 2016 sekarang pastikan Anda menempatkan versi aturan CSS yang belum diperbaiki (misalnya transform: rotate(10deg);) di bawah versi awalan mana pun yang Anda pilih untuk didukung.

— Maximillian Laumeister

301

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.

— tigapuluhdot
sumber

22

Aku cinta kamu! The display: inline-blockmembantu.

— Bugs Bunny

2

Penjelasan akan sangat membantu :)

— scitronboy

56

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.

— phihag
sumber

Bekerja dengan sempurna untuk saya, terima kasih! Saya menggunakannya di <span> & menyalin </span> untuk membuat simbol copyleft.

— Elisabeth

@Elisabeth Itu aplikasi yang luar biasa. Perhatikan bahwa referensi entitas perlu diakhiri dengan titik koma (seperti dalam <span>©</span>), meskipun sebagian besar browser merender kedua cara.

— phihag

Catatan lain: jika Anda menerapkan transformasi untuk keadaan interaksi (misalnya, :hoveratau :active) Anda harus menerapkan inline-blockke elemen dalam keadaan defaultnya, misalnya a { display: inline-block; } a:active { transform: translateY(0.125em); },. Menerapkan inline-blockstatus interaksi saja tampaknya tidak berhasil. Di Chrome setidaknya - ini berfungsi dengan baik di Firefox.

— Paul d'Aoust

1

terima kasih telah menunjukkan fakta yang -webkit-transformtidak berfungsi pada item sebaris. Telah terjebak pada ini sebelumnya.

— pbojinov

@phihag Poin yang sangat bagus, Anda menyelamatkan saya dari beberapa hal menarik rambut! Perlu dicatat bahwa ini dapat menyebabkan elemen Anda menghilang setelah animasi berjalan.

— texelate

21

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

— Josh Crozier
sumber

0

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

— Su '
sumber

-4

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

— pdj
sumber

1

Selama pengujian saya hari ini, saya melihat bahwa -webkit-transformmemang tidak lagi diperlukan di Chrome. Namun, itu masih diperlukan di Safari 8.

— John Slegers

Untuk apa -sand-transform? Pencarian Google singkat tidak menemukan apa-apa.

— Pete

google 'CSS Sandpaper' yang relevan dengan pertanyaan dan dapat membuat segalanya lebih mudah. ini adalah peretasan yang mengimplementasikan dukungan untuk transformasi CSS standar untuk versi lama IE

— Pedro Justo