web-dev-qa-db-fra.com

Pouvez-vous utiliser CSS pour refléter / retourner le texte?

Est-il possible d'utiliser CSS/CSS3 pour refléter du texte?

Plus précisément, j'ai ce caractère de ciseaux "" (✂) que j'aimerais afficher pointant vers la gauche et non vers la droite.

htmlcsscss3
211
pistacchio

Vous pouvez utiliser des transformations CSS pour y parvenir. Un retournement horizontal impliquerait de redimensionner la div comme ceci:

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

Et un retournement vertical impliquerait de redimensionner la div comme ceci:

-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);

DEMO:

span{ display: inline-block; margin:1em; } 
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }
<span class='flip_H'>Demo text &#9986;</span>
<span class='flip_V'>Demo text &#9986;</span>
375
methodofaction
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

Les deux paramètres sont l’axe des X et l’axe des Y. -1 sera un miroir, mais vous pouvez l’adapter à la taille de votre choix. À l'envers et à l'envers serait (-1, -1).

Si vous êtes intéressé par la meilleure option disponible pour la prise en charge inter-navigateurs en 2011, voir mon ancienne réponse .

65
Chris Sobolewski

Vrai miroir:

.mirror{
    display: inline-block; 
    font-size: 30px;

    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}
<span class='mirror'>Mirror Text<span>
52
Cícero Verneck Corrêa

Vous pouvez utiliser soit

.your-class{ 
      position:absolute; 
      -moz-transform: scaleX(-1); 
      -o-transform: scaleX(-1); 
      -webkit-transform: scaleX(-1); 
      transform: scaleX(-1); 
      filter: FlipH;  
}

ou

 .your-class{ 
  position:absolute;
  transform: rotate(360deg) scaleX(-1);
}

Notez que le réglage de position sur absolute est très important! Si vous ne le définissez pas, vous devrez définir display: inline-block;

10
Emanuela Colta

J'ai pavé cette solution en fouillant Internet, y compris

Cette solution semble fonctionner dans tous les navigateurs, y compris IE6 +, en utilisant scale(-1,1) (un miroir approprié) et les propriétés filter/-ms-filter appropriées (si nécessaire) (IE6-8):

/* Cross-browser mirroring of content. Note that CSS pre-processors
  like Less cough on the media hack. 

  Microsoft recommends using BasicImage as a more efficent/faster form of
  mirroring, instead of FlipH or some kind of Matrix scaling/transform.
  @see http://msdn.Microsoft.com/en-us/library/ms532972%28v=vs.85%29.aspx
  @see http://msdn.Microsoft.com/en-us/library/ms532992%28v=vs.85%29.aspx
*/

/* IE8 only via hack: necessary because IE9+ will also interpret -ms-filter,
  and mirroring something that's already mirrored results in no net change! */
@media \0screen {
  .mirror {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(mirror=1)";
  }
}
.mirror {
  /* IE6 and 7 via hack */
  *filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
  /* Standards browsers, including IE9+ */
  -moz-transform: scale(-1,1);
  -ms-transform: scale(-1,1);
  -o-transform: scale(-1,1); /* Op 11.5 only */
  -webkit-transform: scale(-1,1);
  transform: scale(-1,1);
}
7
Jay Dansand

Pour une compatibilité entre navigateurs, créez cette classe.

.mirror-icon:before {
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

Et ajoutez-le à votre classe d'icônes, c'est-à-dire.

<i class="icon-search mirror-icon"></i>

obtenir une icône de recherche avec la poignée à gauche

6
Michael

vous pouvez utiliser "transformer" pour y parvenir. http://jsfiddle.net/aRcQ8/

css:

-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
3
Rito

Il y a aussi le rotateY pour un vrai miroir:

transform: rotateY(180deg);

Ce qui, peut-être, est encore plus clair et compréhensible.

EDIT: Ne semble pas fonctionner sur Opera bien que… malheureusement. Mais cela fonctionne bien sur Firefox. Je suppose qu'il pourrait être nécessaire de dire implicitement que nous faisons une sorte de translate3d peut-être? Ou quelque chose comme ça.

2
JeromeJ

Il suffit d'ajouter une démo de travail pour un retournement de miroir horizontal et vertical.

.horizontal-flip {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.vertical-flip {
  -moz-transform: scale(1, -1);
  -webkit-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}
<div class="horizontal-flip">
  Hello, World
  <input type="text">
</div>
<hr>
<div class="vertical-flip">
  Hello, World
  <input type="text">
</div>
1
niyasc

Encore un exemple montrant comment le personnage pourrait être inversé. Ajoutez des préfixes de fournisseur si vous en avez besoin, mais pour le moment, tous les navigateurs modernes prennent en charge la propriété de transformation sans préfixe. La seule exception est Opera si Opera le mode Mini est activé (environ 3% d'utilisateurs dans le monde).

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Text rotation</title>
  <style type="text/css" media="screen">
    .scissors {
      display: inline-block;
      font-size: 50px;
      color: red;
    }
    .original {
      color: initial;
    }
    .flipped {
      transform: rotateZ(180deg);
    }
    .upward {
      transform: rotateZ(-90deg);
    }
    .downward {
      transform: rotateZ(90deg);
    }
  </style>
  
</head>
<body>
  <ul>
    <li>Original: <span class="scissors original">&#9986;</span></li>
    <li>Flipped: <span class="scissors flipped">&#9986;</span></li>
    <li>Upward: <span class="scissors upward">&#9986;</span></li>
    <li>Downward: <span class="scissors downward">&#9986;</span></li>
  </ul>
</body>
</html>
0
drugan

Vous pouvez essayer box-reflect

box-reflect: 20px right;

voir compatibilité de la boîte de dialogue CSS de la propriété CSS? pour plus de détails

0
Sudeep

c'est ce qui a fonctionné pour moi pour <span class="navigation-pipe">&gt;</span>

display:inline-block;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);

juste besoin d’affichage: inline-block ou block to turn. Donc, fondamentalement, la première réponse est bonne. Mais -180 n'a pas fonctionné.

0
Iggy