CSS3 dönüştürmeyi bir yayında nasıl kullanabilirim?

Question

Bir <h1> etiketi iç içe bir satır içi elemanı (a <span>) var. dönüşümü özelliğini (h1) uyguladım (eğri bir paralelkenar gibi görünüyor).
yayılma etiketini "unskew" ve metnine dönüştürmem gerekiyor. Ancak bu sadece IE'de çalışıyor gibi görünüyor. İşte

HTML an example ve CSS geçerli:

h1 { 
 
    background: #f00; 
 
    padding: .25em .5em; 
 
    text-align: right; 
 
    transform: skew(-15deg); 
 
} 
 
h1 span { 
 
    color: #fff; 
 
    transform: skew(15deg); 
 
}

<h1><span>This is a Title</span></h1>

Answer 1

Açıklama:
A <span> bir satır içi elemanları ve satır içi elemanlarında geçerli değildir özelliğini Transform olduğunu . CSS Transforms Modülü Düzey 1
List of transformable elements on the..

Çözüm:
inline-block veya block için açıklığın ekran özelliğini ayarlayın:

h1 { 
 
    background: #f00; 
 
    padding: .25em .5em; 
 
    text-align: right; 
 
    transform: skew(-15deg); 
 
} 
 
h1 span { 
 
    color: #fff; 
 
    display: inline-block; /* <- ADD THIS */ 
 
    transform: skew(15deg); 
 
}

<h1><span>This is a Title</span></h1>

Answer 2

geç Burada biraz, ama sen ayarlayabilirsiniz

h1 span{ 
    position:absolute; 
} 

Th CSS3 dönüşüm özelliklerini normal olarak kullanın.