スライダーで矢印を画像にした場合、左と右の画像2つ用意する必要がありますが、片方だけ用意してあとは反転させれば使う画像は1つで済みます。
またテキストが書いてある背景画像を反転させる場合、テキストも反転してしまう可能性があるので、背景画像だけ反転させる方法も解説します。
他にも画像や要素を反転させたいケースはあると思うので、今回はサンプルを使って解説していきます。
（有料になっていたらすいません🙇♂️）
CSSで要素を上下左右に反転させる方法
今回は4種類の反転方法を解説します。
- 左右反転
- 上下反転
- 上下左右反転
- 背景画像を反転（テキストはそのまま）
今回はtransform: scale();を中心に使っていきますが、transform: rotate();を使う方法もあります。
ただしtransform: rotate();は反転より回転で使いますし、transform: scale();の方がぱっと見て反転させてると分かるので、反転させるならtransform: scale();の方が個人的にはいいかと思います。
transform: rotate();については以下の記事を参照下さい。
-
CSSで画像や文字など要素を回転させる方法【アニメーションも解説】
続きを見る
また今回使う画像はこちらになります。
HTMLはシンプルにimgタグだけにします。
<img src="画像パス" alt="" />CSSは幅と高さだけ書きますが、解説では省略します。
img {
height: auto;
width: 200px;
}そして今回のポイントとなるtransform: scale();は以下になります。
transform: scale(X方向の縮尺比率, Y方向の縮尺比率);なので通常の状態だとtransform: scale(1, 1);になります。
要素を左右反転させる方法
左右反転させるCSSはこちらです。
img {
transform: scale(-1, 1);
}縮尺比率は変わらないのでサイズはそのままですが、X方向(横方向)をマイナスにすることで、左右反転させています。
See the Pen
上下左右反転：左右反転 by junpei (@junpei-sugiyama)
on CodePen.
transform: scaleX(-1);
変更するのはX方向だけなので、以下でも同じです。
img {
transform: scaleX(-1);
}
transform: rotateY(180deg);
transform: rotateY(180deg);でも同じです。
img {
transform: rotateY(180deg);
}こっちはX方向ではなくY軸での回転なので、Yで合っています。
要素を上下反転させる方法
上下反転させるCSSはこちらです。
img {
transform: scale(1, -1);
}今度はY方向(縦方向)をマイナスにすることで、上下反転させています。
See the Pen
上下左右反転：上下反転 by junpei (@junpei-sugiyama)
on CodePen.
transform: scaleY(-1);
また変更するのはY方向だけなので、以下でも同じです。
img {
transform: scaleY(-1);
}
transform: rotateX(180deg);
transform: rotateX(180deg);でも同じです。
img {
transform: rotateX(180deg);
}こっちはY方向ではなくX軸での回転なので、Xで合っています。
要素を上下左右反転させる方法
ここまでくれば予想できると思いますが、上下左右反転させるCSSはこちらです。
img {
transform: scale(-1, -1);
}今度はX方向・Y方向をマイナスにすることで、上下反転させています。
See the Pen
上下左右反転：上下左右反転 by junpei (@junpei-sugiyama)
on CodePen.
transform: scaleX(-1) scaleY(-1);
一応こういう書き方もできます。
img {
transform: scaleX(-1) scaleY(-1);
}
transform: rotate(180deg);
transform: rotate(180deg);でも同じです。
img {
transform: rotate(180deg);
}これは時計の針のように半周回転するイメージです。
テキストが書いてある背景画像を反転させる方法
今度は画像の上にテキストが書いてある背景画像を反転させます。
こちらが反転前の状態です。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
コードはこちらです。
<div class="bg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>.bg {
align-items: center;
background-image: url("画像パス");
background-repeat: no-repeat;
background-size: cover;
display: flex;
height: 66vw;
position: relative;
width: 100%;
}
.bg::before {
background: rgba(0, 0, 0, .5); /* マスクの色(黒の50%) */
bottom: 0;
content: "";
height: auto;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
p {
color: #fff;
font-size: clamp(16px, 5vw, 50px);
line-height: 1.5;
position: relative;
width: 70%;
}いろいろ書いてありますが、とりあえず背景画像のチワワが右側にいることだけ覚えておいて下さい。
そしてこちらのコードを追記します。
.bg {
transform: scale(-1, 1);
}すると背景画像だけでなく、テキストも反転してしまいます。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
これは背景画像のある.bgの子要素も全て反転しているからで、これを修正するにはその子要素であるpタグだけさらに反転させれば一周して戻ります。
.bg {
transform: scale(-1, 1);
}
p {
transform: scale(-1, 1); /* 背景画像と同じコードを書いて相殺 */
}See the Pen
上下左右反転：背景画像(背景画像だけ反転) by junpei (@junpei-sugiyama)
on CodePen.
ただしテキストの位置は右になってしまっているので、今回の場合は以下のコードを追記して左寄せにします。
.bg {
justify-content: flex-end;
}See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
まとめ
今回は要素を上下左右反転させる方法と、背景画像だけ反転させる方法を解説してきました。
背景画像だけ反転させる場合は、その上に書いてあるテキストの位置なども注意しましょう。
以上になります。
;を使う方法を解説します){kind=link}