【transform】画像などを左右対象で反転させる方法

こんにちは。今日は「画像などを左右対象で反転させる方法」について書きます！

どういう意味かというと、このタイトル画像で説明します↓

両端についている線は画像なのですが、実は使っている画像は1つしかありません。
右側の線は左側の画像を反転させています。

今回書く内容はこの反転させる方法です！
書き方は知っているだけで2つあるのですが、他にもあるかもしれませんね＾＾

ではさっそくみていきましょう〜＾＾

コード

HTML編

        <section class="contSect">
          <h2 class="sectTit"><span class="titInner">タイトル</span></h2>
        </section>
        <!-- ./contSect -->

文字は<span>で囲います。

CSS編

.sectTit {
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  font-size: 2.4rem;
}

.sectTit .titInner {
  position: relative;
  display: inline-block;
}

.sectTit .titInner:before,
.sectTit .titInner:after {
  position: absolute;
  top: 50%;
  display: block;
  width: 22px;
  height: 40px;
  margin: 0 18px;
  background: url(../images/icn_line.svg) no-repeat center center/contain;
  content: "";
}

.sectTit .titInner:before {
  right: 100%;
  transform: translateY(-50%);
}

.sectTit .titInner:after {
  left: 100%;
  transform: translateY(-50%) rotateY(180deg);
}

長々と書いているのですが、反転の意味がある箇所はrotate部分です！

  transform: translateY(-50%) rotateY(180deg);

rotateY(180deg)を指定することによってY軸で反転してくれます。

あと、冒頭でも書いたようにもう1つ書き方があって、それはこちらです↓

  transform: translateY(-50%) scaleX(-1);

scaleX(-1)を指定しても同じ結果になります。

まとめ

このようにCSSで解決できるなら余分な画像の容量を減らせるので積極的に使っていきたいですね。

参考になれば幸いです＾＾
では今日はここまで〜〜