更新日
09｜transformの4つの値で要素に様々な変化を加えよう
web兄さん
transform（直訳で変身）を使用することで要素に色々な変化をもたらすことができます。
アニメーションと併せて使用されることの多いプロパティです。
このデフォルト状態を4つの状態に変化させる方法を今回は学習します。
❶X軸・Y軸の移動
❷拡大・縮小させる
❸回転させる
❹斜めにする
これから紹介するサンプルには全て:hoverの擬似クラスをつけています
<div>
<img src="photo.jpg">
</div>img{
transition: transform 0.3s /* transformの変化をスムーズに */
}
img:hover{ /* ホバーした時だけ適用する */
translate : 〇〇
}transformの変化をわかりやすくするためにサンプルではホバー時のみ適用するようにしています。
アニメーションや:hoverを使わなくてもがなくてもtranslateは適用できるので勘違いしないようにしましょう！
translate｜要素をX軸・Y軸で移動させる
要素を移動させるという点においてpositionと近い使い方をします。ただ、translateの場合はpositionほど柔軟性はなく、常にその要素が今いる座標を基準とします。
img:hover{
/*
x軸+30px（右へ）
y軸-30px（上へ）
*/
transfrom: translate(30px,-30px);
}この書き方はx軸とy軸を両方指定する時に使用するので、片方だけを指定する場合はtranslateX()やtranslateY()でもOKです。
数値には正の数・負の数が設定可能です。
scale｜拡大・縮小させる
テキスト
テキスト
img:hover{
/*
縦横比を保って1.25倍に拡大
*/
transfrom: scale(1.25);
}transform: scale()では元のサイズを「1」として、〇倍という形で数値を設定します。
scale(3)：元サイズの3倍scale(0.5)：元サイズの0.5倍（つまり1/2）
また、widthやheightで要素を大きくする場合と違って他の要素に影響を与えないこともポイントです。画像をホバーした際に「テキスト」の位置は変わっていませんよね。
rotate｜回転させる
img:hover{
/*
45度回転させる
*/
transfrom: rotate(45deg);
}transform: rotate()ではdeg（degree：度）という単位で数字を設定します。
数値には正の数（右回転）・負の数（左回転）が設定可能です。
ちなみに360度以上を設定すれば1回転させることも可能で、よくある回転し続けるアニメーションはこれを利用して実装しています。
img:hover{
animation: 3s linear infinite loop-rotate;
}
@keyframes loop-rotate {
0%{ transform:rotate(0);}
100%{ transform:rotate(360deg);
}skew｜斜めにする
img:hover{
transform: skew(20deg);
}transform: skew()でもdeg（degree：度）という単位で数字を設定します。
skew自体はあまり使用頻度は高くありませんが、「,」で区切ることで斜めに倒す方向を指定できます。
img{
transform: skew(0,20deg);
}img{
transform: skew(20deg,0);
}transformは基本を理解すれば全然難しくありませんよね！translateを使った中央寄せテクニック
最後に抑えたところでtranslateを使用した中央寄せのテクニックを紹介します。
これはめちゃくちゃ使うテクニックなのでしっかりと原理を覚えましょう。
HTMLのコード
<!-- 親の中央に配置する -->
<div class="box">
<img src="photo.jpg">
</div>
<!-- 吹き出しの中央に配置する -->
<p class="fukidashi">吹き出しデザイン<p>CSSのコード
/*
* 親要素の中央
--------------------------*/
.box{
background-color: #CEE7FD;
width: 400px;
height: 400px;
margin: 100px auto;
position: relative;
}
.box img{
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*
* 吹き出し
--------------------------*/
.fukidashi{
position: relative;
text-align: center;
background: #CEE7FD;
border-radius: 8px;
margin:0 auto;
padding: 10px 0;
width: 300px;
}
.fukidashi::before{
content: "";
/* 配置 */
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
/* 三角形 */
border-top: 20px solid #cee7fd;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
}