【CSS】transformを使って、要素を立体的に傾けてみる

　どうも！LSSです！！

　以前にもtransformプロパティを試してみた事はありましたが、
「最低限、何が必要なのか」
イマイチ掴めていないところがあったので、色々実験してみました。

rotateYのサンプル

立体的に傾く

コード

<div style="
transform: perspective(100px) rotateY(-12deg);
width: 300px;
border: 1px solid black;
font-size: 40px;
">立体的に傾く</div>

※ちなみに、rotateYは「Y軸を軸として、指定した角度（deg）分だけ回転させる」プロパティです。 rotateX や rotateZ もあります。
「Y軸を軸として」はポールダンサーをイメージしてもらうといいですｗ

最低限、必要なのは

transform: perspective(100px) rotateY(-12deg);

この一行で、傾きを決めているのは
rotateY(-12deg)
ですが、
perspective(100px)

がないと立体的な傾きは表現できないようです。
（100pxという数値が奥行のサイズを示しています）

他の、
width: 300px;
border: 1px solid black;
font-size: 40px;
は、傾きが分かりやすいように記載していますが、例えばこのうち、
width: 300px;
を削ると…

立体的に傾く

…と、なんだかとんでもない事になってしまいます^^;;;

これは「widthを省略した<div>タグは、幅が画面横幅いっぱいがデフォルトになる」からですね。 

divをspanにしても、うまくいかなくなる

立体的に傾く

<div>を<span>に書き換えると↑のように、傾かなくなります。

うまくいかないコード

<span style="
transform: perspective(100px) rotateY(-12deg);
width: 300px;
border: 1px solid black;
font-size: 40px;"
>立体的に傾く</span>

divとspanの違いは、ブロック要素かインライン要素

<div>タグはデフォルトでブロック要素、<span>タグはデフォルトでインライン要素。

であれば、displayプロパティで強制的にブロック要素化した<span>なら？

立体的に傾く

できましたね^^

ブロック要素化した<span>タグのコード

<span style="
transform: perspective(100px) rotateY(-12deg);
width: 300px;
border: 1px solid black;
font-size: 40px;
display: block;
">立体的に傾く</span>

では、インラインブロック要素では？

displayプロパティには、インライン要素とブロック要素のいいとこどりした「インラインブロック」を指定できます。

その場合は？

立体的に傾く

こちらも大丈夫ですね^^

インラインブロック要素化した<span>タグのコード

<span style="
transform: perspective(100px) rotateY(-12deg);
width: 300px;
border: 1px solid black;
font-size: 40px;
display: inline-block;
">立体的に傾く</span>

再度、widthを削除してみます

インラインブロック要素なら「横幅いっぱい」になったりしないはずなので、widthの指定を削ってみます！

立体的に傾く

不要な余白が無くなって、こっちのほうが使いやすそうです！

インラインブロック要素化した<span>タグのコード

<span style="
transform: perspective(100px) rotateY(-12deg);
border: 1px solid black;
font-size: 40px;
display: inline-block;
">立体的に傾く</span>

角度指定を正の値にしてみる

立体的に傾く

これまで-12degを指定していましたが、20degにしてみたところ、左端が飛び出してしまいました^^;

これは「Y軸を軸とした傾き」の中心点が、「ボックス要素の中心」であるため、
「中心より左のほうは手前に飛び出して見せるために大きく表示しよう！」
とされてしまうために発生します。

で、その「傾きの中心点」を指定するプロパティtransform-originを使ってみます。

transform-origin:0% 50% 0px;

立体的に傾く

うまくいきましたね^^

コード

<span style="
transform: perspective(100px) rotateY(20deg);
transform-origin: 0% 50% 0px;
border: 1px solid black;
font-size: 40px;
display: inline-block;
">立体的に傾く</span>

傾きの中心点を指定するtransform-originは、X座標位置、Y座標位置、Z座標位置を指定します。

今回、X座標位置を「0%」とした事で、「左端を軸にした回転」となっています。

ちょっとだけrotateX

立体的に傾く

コード

<span style="
transform: perspective(100px) rotateX(25deg);
transform-origin: 50% 100% 0px;
border: 1px solid black;
font-size: 40px;
display: inline-block;
">立体的に傾く</span>

試しにrotateX、X軸を軸とした回転も試してみます。

transform-originで２つめの値を「100%」にしている事で、「要素の底」を中心とした回転となり、結果として「上部を25度、向こうに押し倒した」という効果になっていますね。

応用～他の装飾をした要素に併せて指定できます

例えば、「CSS模写？に挑戦！」に出てきた、

「青い空とペンキ塗り。」

に付け足すと、

「青い空とペンキ塗り。」

こうなりますｗ

コード

<div style="
transform: perspective(100px) rotateY(10deg);
transform-origin: 0% 100% 0px;
width: 350px; border-radius: 15px; background-image: linear-gradient(90deg, hsl(223,100%,70%) 0%,hsl(179,100%,60%) 60%, hsl(193,100%,97%) 100%); color: white; text-shadow: 12px 12px 5px #444455; font-size: 23px; padding: 1em;">「青い空とペンキ塗り。」</div>

また、「【CSS】多段text-shadow、試してみました【実験】」に出てきた、

間に白を挟む

に付け足すと、

間に白を挟む

こうなりますねｗ

コード

<span style="
transform: perspective(100px) rotateY(-10deg);
transform-origin: 0% 50% 0px;
display: inline-block;
font-size: 40px; font-weight: bold; color: black; text-shadow: 2px 2px 0 #fff,4px 4px 0 #88e;">間に白を挟む</span>

 ※spanタグなのでdisplay: inline-block;も指定する必要があります。

まとめ

立体的な傾きを実現するのに、最低限必要な指定は

transform: perspective(100px) rotateY(-10deg);

のようにperspectiveと、rotateYまたはrotateXの記載。

そして対象が「インライン要素」では反映されず、「ブロック要素」または「インラインブロック要素」である事が必要。
（インラインブロック化はdisplay: inline-block;）

見た目の調整のためにwidthの指定が必要となる事もあります。
（特にブロック要素で幅100%デフォルトで取られた時がキツい。インラインブロック便利！）

同じく、見た目の調整のために、transform-originの指定が必要になる場合もあり。

他にもtransform関連のプロパティはいくつかありますが、最低限、これだけ押さえておけばとりあえず使えるかな、と^^

最後にもういっちょ、

Little
Strange
Software

<p style="
transform: perspective(100px) rotateX(15deg);
transform-origin: 50% 100% 0px;
display: inline-block;
background-color: gray; border-radius: 15px; border: 15px outset #dddddd; text-align: center;">
<span style="font-size: 50px; font-weight: bold; color: gold; background-image: linear-gradient(170deg, black,brown,yellow,white,yellow,brown,black); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
Little<br />Strange<br />Software
</span>
</p>

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^