Virar texto usando transformações CSS

No CSS, você pode manipular o texto e outros elementos usando transformações. Uma transformação comum é o espelhamento, também conhecido como inversão. Este efeito pode ser alcançado usando uma propriedade CSS simples. escala (-1, 1);

-webkit-transform: escala (-1, 1);

-o-transform: escala (-1, 1);

-ms-transform: scale (escala (escala ( -1, 1);

transform: escala (-1, 1);


Esta propriedade escala o elemento horizontalmente por -1, virando -o efetivamente ao longo do eixo vertical.

Da mesma forma, para flip-text verticalmente (espelhe-o através do eixo horizontal), use esta propriedade:

-moz-transform: scale (1, -1); : escala (1, -1);

-O-Transform: escala (1, -1);

-ms-transform: escala (1, -1);

transform: escala (1, -1);

aplicando esta propriedade, você escala o elemento verticalmente por -1, lançando -o ao longo do eixo horizontal. ]
considere o seguinte código html, que exibe algum texto e um caractere de tesoura:


texto de demonstração ✂

texto de demonstração ✂

O código CSS abaixo aplica os efeitos de inversão horizontal e vertical aos vãos correspondentes:

span {display: inline -bloquear; margem: 1em; }

. flip_h {transform: escala (-1, 1); Cor: vermelho; }
. flip_v {transform: escala (1, -1); Cor: verde; }

Isso refletirá os caracteres da tesoura ao longo de seus respectivos eixos, criando a tesoura desejada à esquerda.