发表新帖
发表新帖

Can you use CSS to mirror/flip text?

后端 未结
关注
14 2247
旧时难觅i
旧时难觅i 2020-11-28 01:27

Is it possible to use CSS/CSS3 to mirror text?

Specifically, I have this scissors char “✂” (✂) that I\'d like to display pointing left a

相关标签:
14条回答
  • 生来不讨喜
    2020-11-28 01:39

    There's also the rotateY for a real mirror one:

    transform: rotateY(180deg);

    Which, perhaps, is even more clear and understandable.

    EDIT: Doesn't seem to work on Opera though… sadly. But it works fine on Firefox. I guess it might required to implicitly say that we are doing some kind of translate3d perhaps? Or something like that.

    0 讨论(0)
  • Happy的楠姐
    2020-11-28 01:45

    That works fine with font icons like 's7 stroke icons' and 'font-awesome':

    .mirror {
  display: inline-block;
  transform: scaleX(-1);
}

    And then on target element:

    <button>
  <span class="s7-back mirror"></span>
  <span>Next</span>
</button>
    0 讨论(0)
  • 轻奢々
    2020-11-28 01:50

    you can use 'transform' to achieve this. http://jsfiddle.net/aRcQ8/

    css:

    -moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
    0 讨论(0)
  • 無奈伤痛
    2020-11-28 01:50

    You could try box-reflect

    box-reflect: 20px right;

    see CSS property box-reflect compatibility? for more details

    0 讨论(0)
  • 佛祖请我去吃肉
    2020-11-28 01:53

    Just one more example how the character could be flipped. Add vendor prefixes if you need ones but for now all modern browsers support unprefixed transform property. The only exception is Opera if Opera Mini mode is enabled (~3% world users).

    <!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 讨论(0)
  • 面向向阳花
    2020-11-28 01:53

    direction: rtl; is probably what you are looking for.

    0 讨论(0)
 看不清?
提交回复
热议问题