Вопросы Теги

Отражение / инвертирование / зеркальное отображение текста только с использованием css

Я немного погуглил, и вот мой ответ. 

<!--[if IE]>
<style>
    .mirror {
        filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
    }
</style>
<![endif]--> 
<style>
.mirror {
    display:block; 
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform:matrix(-1, 0, 0, 1, 0, 0);
}
</style>
<div class="mirror">testing</div>

Единственная проблема здесь в том, что центр зеркального отображения не является центром объекта, поэтому, возможно, нам нужен некоторый javascript для переместите объект туда, куда мы хотим.

55
задан 2 revs, 2 users 100% 1 June 2019 в 04:03
поделиться

1 ответ

Ваш код правильный, но есть более простой способ сделать это: 

img.flip {
  -moz-transform:    scaleX(-1); /* Gecko */
  -o-transform:      scaleX(-1); /* Opera */
  -webkit-transform: scaleX(-1); /* Webkit */
  transform:         scaleX(-1); /* Standard */

  filter: FlipH;                 /* IE 6/7/8 */
}

Я думаю, что это решит вашу проблему центрированного зеркалирования.

Как уже отмечалось, вам нужно будет настроить элемент для использования отображения блока, встроенного блока и т. Д.

115
ответ дан 7 November 2019 в 07:14
поделиться