Как я могу использовать преобразование CSS3 на пролете?

Question

У меня есть встроенный элемент (a <span>), вложенный в тег <h1>. Я применил преобразование свойства в h1 (перекос, чтобы он выглядел как параллелограмм).
Мне нужно, чтобы преобразовать тег span "unskew" и его текст. Но это, похоже, работает только в IE.

Вот an example из HTML и CSS:

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

Объяснение:
<span> это инлайн элементы и Transform свойство не применяется на встроенных элементах ,
List of transformable elements on theна модуле преобразования CSS Уровень 1.

Решение:
Установите дисплей свойство пролете в inline-block или block:

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

Немного поздно, но вы можете установить

h1 span{ 
    position:absolute; 
} 

Th ru обычно используют свойства преобразования CSS3.