Переворачивание/инвертирование/зеркалирование текста только с помощью css

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

.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);
}
<!--[if IE]>
<style>
    .mirror {
        filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
    }
</style>
<![endif]-->

<div class="mirror">testing</div>

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


html css webkit mirroring
person Community    schedule 08.08.2010    source источник
comment
Используйте transform-origin для управления точкой, относительно которой применяется преобразование.   -  person ivan_pozdeev    schedule 27.11.2012
comment
˙pɐdǝʇou sʍopuᴉʍ ʇsnɾ ƃuᴉsn ʇᴉ ʎɐldsᴉp puɐ ǝlᴉɟ ʇxǝʇ ɐ sɐ ʇᴉ ǝʌɐs uɐɔ noʎ ʇɐɥʇ ǝƃɐʇuɐʌpɐ ǝɥʇ sɐɥ oslɐ ʇxǝʇ uᴉɐlԀ ˙sᴉɥʇ ǝʞᴉl sɐǝɹɐ xoq-ʇuǝɯɯoɔ ƃuᴉpnlɔuᴉ «pǝʍollɐ sᴉ ʇxǝʇ uᴉɐld ǝɹǝɥʍ ǝɹǝɥʍʎuɐ ʇᴉ ǝʇsɐd puɐ ʎdoɔ uɐɔ noʎ ʇɐɥʇ sᴉ ɥɔɐoɹddɐ sᴉɥʇ ɟo ǝƃɐʇuɐʌpɐ ǝɥ┴ ˙ʇɔǝɟɟǝ ɹoɹɹᴉɯ ʇɔǝɟɹǝd ɥʇᴉʍ sɹǝʇɔɐɹɐɥɔ ʎɐʎɐldsᴉp uɐɔ noʎ 'ɥƃnoɥʇ ʇdᴉɹɔsɐʌɐs ǝlʇʇᴉl ɐ ʇsnɾ ɥʇᴉm   -  person Pacerier    schedule 30.06.2015
comment
Я сопротивлялся, перевернув свой ноутбук вверх дном, чтобы прочитать комментарий выше. Это... заняло некоторое время.   -  person Kay    schedule 28.05.2016

Ответы (2)


arrow_upward
137
arrow_downward

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

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 */
}

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

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

person Community    schedule 08.08.2010
comment
Обратите внимание, что вам придется использовать блок или элемент встроенного блока: codepen.io/igalst/pen /fKhmp - person IgalSt; 03.06.2013

arrow_upward
10
arrow_downward

для отражения используйте transform: scaleX(-1); для отражения используйте rotate(180deg);

person Community    schedule 21.11.2018