CSS3 dönüşümü çalışmıyor

123

Menü öğelerimi 10 derece döndürerek dönüştürmeye çalışıyorum. CSS'm Firefox'ta çalışıyor, ancak efekti Chrome ve Safari'de kopyalayamadım. IE'nin bu CSS3 özelliğini desteklemediğini biliyorum, bu yüzden bu bir sorun değil.

Aşağıdaki CSS'yi kullandım:

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

Lütfen kimse nerede yanlış yaptığımı söyleyebilir mi?

Teşekkürler.

html css

— shruti
kaynak

2

Bilginize, IE bu CSS3 özelliğini destekliyor, sadece bir öneke ihtiyacınız var:-ms-transform:rotate(10deg);

— Joshua Pinter

CSS dönüşümünün

— mems

2

Henüz kimse bundan bahsetmediğinden, 2016 yılı olduğu için artık transform: rotate(10deg);desteklemeyi seçtiğiniz önekli sürümlerin altına CSS kuralının öneksiz sürümünü (örneğin ) yerleştirdiğinizden emin olun .

— Maximillian Laumeister

303

Bu, HTML / CSS'nizin geri kalanını görmeden yalnızca eğitimli bir tahmindir:

Eğer başvurdunuz display: blockveya display: inline-blockhiç li a? Değilse, deneyin.

Aksi takdirde, libunun yerine CSS3 dönüştürme kurallarını uygulamayı deneyin .

— thirtydot
kaynak

22

Seni seviyorum! Yardım display: inline-blocketti.

— Bugs Bunny

2

Bir açıklama yardımcı olabilir :)

— scitronboy

56

Webkit tabanlı tarayıcılarda (Safari ve Chrome), -webkit-transform satır içi öğelerde göz ardı edilir. . Set display: inline-block;için o iş yapmak . Gösteri / test amaçlı olarak, transformation-originmetnin görünür alandan döndürülmemesi için bir negatif açı kullanmak da isteyebilirsiniz .

— phihag
kaynak

Benim için mükemmel çalıştı, teşekkürler! Bunu <span> & kopyala </span> üzerinde bir copyleft sembolü yapmak için kullandım.

— Elisabeth

@Elisabeth Bu mükemmel bir uygulama. Varlık referanslarının noktalı virgülle sonlandırılması gerektiğine dikkat edin (olduğu gibi <span>©</span>), ancak çoğu tarayıcı her iki yolu da oluşturur.

— phihag

Başka bir not: dönüşümü bir etkileşim durumu (örneğin, :hoverveya :active) için uyguluyorsanız inline-block, öğeye varsayılan durumunda uygulamanız gerekir , örneğin a { display: inline-block; } a:active { transform: translateY(0.125em); }. Tek inline-blockbaşına etkileşim durumuna başvurmak işe yaramıyor gibi görünüyor. En azından Chrome'da - Firefox'ta iyi çalışıyor.

— Paul d'Aoust

1

bunun -webkit-transformsatır içi öğeler üzerinde çalışmadığını belirttiğiniz için teşekkür ederiz . Daha önce buna takılıp kalmıştı.

— pbojinov

@phihag Mükemmel nokta, beni epeyce saçlarımdan kurtardın! Bunun, animasyon çalıştıktan sonra öğelerinizin kaybolmasına neden olabileceğini belirtmek gerekir.

— texelate

21

_{Kimse ilgili belgelere başvurmadığından:}

CSS Dönüşümleri Modül Seviye 1 - Terminoloji - Dönüştürülebilir Öğe

Dönüştürülebilir bir öğe, aşağıdaki kategorilerden birinde yer alan bir öğedir:

Düzeni, blok düzeyinde veya atomik satır içi düzeyinde bir öğe olan veya görüntüleme özelliği tablo satırı, tablo satırı grubu, tablo üstbilgi grubu, tablo altbilgisi ile hesaplanan CSS kutu modeli tarafından yönetilen bir öğe -grup, table-cell veya table-caption

SVG ad alanındaki bir öğe ve transform, 'patternTransform' veya gradientTransform niteliklerine sahip CSS kutu modeli tarafından yönetilmez.

Sizin durumunuzda, <a>öğeler inlinevarsayılan olarak.

displayÖzelliğin değerinin değiştirilmesi, inline-blocköğeleri atomik satır içi düzey öğeler olarak işler ve bu nedenle öğeler tanım gereği "dönüştürülebilir" hale gelir .

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

Yukarıda bahsedildiği gibi, bu yalnızca -webkitIE / FF'de çalışıyor göründüğünden bağımsız olarak temel tarayıcılarda uygulanabilir görünmektedir .

— Josh Crozier
kaynak

0

Özellikle yalnızca bağlantıları döndürmeye mi çalışıyorsunuz? Çünkü bunu LI etiketlerinde yapmak iyi çalışıyor gibi görünüyor.

Snook'a göre dönüşümler, etkilenen öğelerin blok olmasını gerektirir. Eklemek isterseniz, bunu IE için filtreler kullanarak çalıştıracak bir kod da var (değerler üzerinde bazı sınırlamalar var gibi görünse de).

— Su'
kaynak

-4

-webkit-transform artık gerekli değil

ms zaten döndürmeyi destekliyor ( -ms-transform: rotate(-10deg);)

bunu dene:

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
kaynak

1

Bugünkü testlerim sırasında, bunun -webkit-transformartık Chrome'da gerçekten gerekli olmadığını fark ettim . Ancak, Safari 8'de yine de gerekliydi.

— John Slegers

-Sand-dönüşümü ne içindir? Kısa bir Google araması hiçbir sonuç vermedi.

— Pete

soruyla alakalı olan ve işleri kolaylaştırabilecek google 'CSS Zımpara Kağıdı'. IE'nin eski sürümleri için standart CSS dönüşümü desteğini uygulayan bir hack

— Pedro Justo