Bagaimana untuk Memutar Elemen dalam IE9 menggunakan Transform CSS3?

Transformasi CSS3 dalam IE9: Putaran

Artikel ini bertujuan untuk menyelesaikan masalah elemen berputar dalam IE9.

Soalan

Dalam reka bentuk, kita memerlukan elemen menegak. Walaupun CSS berfungsi dengan baik dalam semua pelayar kecuali IE9. Kami menggunakan atribut penapis dalam IE7 dan IE8:

progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Walau bagaimanapun, ini menyebabkan elemen menjadi telus dalam IE9 dan sifat "transform" CSS3 nampaknya tidak mempunyai kesan!

Jawapan

Putaran CSS3 standard sepatutnya berfungsi dalam IE9, tetapi kami berpendapat awalan vendor perlu ditambah, seperti ini:

-ms-transform: rotate(10deg);

Ia mungkin tidak tersedia dalam versi beta jika tidak, cuba muat turun versi pratonton semasa (Pratonton 7), yang merupakan versi yang lebih baharu daripada versi beta. Kami tidak mempunyai versi beta beta jadi tidak dapat mengesahkan sama ada ia dalam versi itu. Versi akhir pastinya dirancang untuk menyokongnya.

Kami juga boleh mengesahkan bahawa atribut penapis khusus IE telah dialih keluar dalam IE9.

Dokumentasi lanjut

Ia dikatakan sangat terhad tetapi kami mendapati halaman ini: http://css3please.com/ yang berguna untuk semua pelayar Berguna untuk menguji pelbagai ciri CSS3 dalam pelayar.

Tetapi menguji ciri putaran pada halaman ini dalam pratonton IE9 menyebabkannya ranap dengan teruk.

Walau bagaimanapun, kami secara bebas menguji -ms-transform:rotate() dalam IE9 pada halaman ujian kami sendiri dan ia berfungsi dengan baik. Oleh itu, kesimpulan kami ialah ciri itu dilaksanakan, tetapi dengan beberapa pepijat, mungkin berkaitan dengan tetapan dinamik.

Satu lagi titik rujukan berguna untuk menentukan ciri yang dilaksanakan di mana penyemak imbas ialah www.canIuse.com -- lihat http://caniuse.com/#search=rotation

Terkini Kemas kini

Menyiarkan semula jawapan lama ini kerana kami baru-baru ini mengetahui tentang penggodaman yang dipanggil Kertas Pasir CSS yang berkaitan dengan masalah dan mungkin menjadikan perkara lebih mudah .

Penggodaman ini melaksanakan sokongan untuk perubahan CSS standard dalam versi lama IE. Jadi sekarang anda boleh menambah yang berikut pada CSS anda:

-sand-transform: rotate(10deg);

... dan pastikan ia berfungsi dalam IE 6/7/8 tanpa menggunakan sintaks penapis. (Sudah tentu, ia masih menggunakan sintaks penapis di bawah hud, tetapi ini dibuat lebih mudah dengan menggunakan sintaks yang serupa dengan sintaks penyemak imbas lain.)

Atas ialah kandungan terperinci Bagaimana untuk Memutar Elemen dalam IE9 menggunakan Transform CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!