【HTML】画像やアイコン・文字などを反転させる - scale()を使った方法

Photo by Devin Avery on Unsplash

scale()を使ったHTML要素を反転させる方法

[HTML]  [CSS]  [スタイル]

コード

transform:scale(-1,1);

見本

通常

通常 HTML CSS JS

5

Photo by Thiébaud Faix on Unsplash

<p>5</p>
<figure class="figure-image figure-image-fotolife mceNonEditable" title="Photo by Thiébaud Faix on Unsplash">
    <p><img class="hatena-fotolife" src="https://cdn-ak.f.st-hatena.com/images/fotolife/S/Surprisedblog/20190926/20190926044330.jpg" alt="Photo by Thiébaud Faix on Unsplash" /></p>
    <figcaption>Photo by Thiébaud Faix on Unsplash</figcaption>
</figure>

 

 

反転

反転 HTML CSS JS

5

Photo by Thiébaud Faix on Unsplash

<p class="reverse">5</p>
<figure class="reverse figure-image figure-image-fotolife mceNonEditable" title="Photo by Thiébaud Faix on Unsplash">
    <p><img class="hatena-fotolife" src="https://cdn-ak.f.st-hatena.com/images/fotolife/S/Surprisedblog/20190926/20190926044330.jpg" alt="Photo by Thiébaud Faix on Unsplash" /></p>
    <figcaption>Photo by Thiébaud Faix on Unsplash</figcaption>
</figure>

.reverse{
    transform:scale(-1,1);
}

 

上下反転

要素を回転、反転させて逆さまにする。

上下反転 HTML CSS JS

5

Photo by Thiébaud Faix on Unsplash

<p class="reverse2">5</p>
<figure class="reverse2 figure-image figure-image-fotolife mceNonEditable" title="Photo by Thiébaud Faix on Unsplash">
    <p><img class="hatena-fotolife" src="https://cdn-ak.f.st-hatena.com/images/fotolife/S/Surprisedblog/20190926/20190926044330.jpg" alt="Photo by Thiébaud Faix on Unsplash" /></p>
    <figcaption>Photo by Thiébaud Faix on Unsplash</figcaption>
</figure>

.reverse2{ transform:scale(-1,1) rotate(180deg); }