IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

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

Photo by Devin Avery on Unsplash

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

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

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

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); }