web-dev-qa-db-fra.com

Comment utiliser la transformation CSS3 sur une plage?

J'ai un élément en ligne (un <span>) imbriqué dans un <h1> tag. J'ai appliqué une propriété de transformation au h1 (asymétrique pour ressembler à un parallélogramme).
J'ai besoin de transformer la balise span pour la "décompresser" et son texte. Mais cela ne semble fonctionner que dans IE.

Voici n exemple du HTML et du 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>
csscss-transforms
27
jenhan

Explication:
UNE <span> est un élément en ligne et la propriété Transform ne s'applique pas aux éléments en ligne .
Liste des éléments transformables sur le module CSS Transforms niveau 1.

Solution:
Définissez la propriété d'affichage de la plage sur inline-block ou block. Cela vous permettra d'appliquer des transformations à l'élément span.
Cela fonctionne également pour d'autres éléments en ligne comme <a> <em> <strong>... (voir la liste des éléments en ligne sur MDN ).

Voici une démo avec le <span> élément:

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>
48
web-tiki

Un peu tard ici, mais vous pouvez régler

h1 span{
   position:absolute;
}

Utilisez ensuite les propriétés de transformation CSS3 normalement.

1
Anurag Srivastava