transformは動きを出すプロパティ
transform（トランスフォーム）とは訳すと変形させるという意味です。
使い道としては、移動、回転、伸縮、傾斜の4タイプがあります。
どんな使い道？
| 関数名 | 効果 |
| translate(トランスレイト) | 移動させる |
| rotate(ローテイト) | 回転させる |
| scale(スケール) | 拡大縮小させる |
| skew(スキュー) | 傾斜させる |
translate(移動)の使い方
例
<style>
.translate{
width:100px;
height:100px;
transition-duration: 1s;
background:red;
margin:30px auto 0 auto;
text-align:center;
border-radius: 20px;
}
.translate:hover { transform:translateX(30px); }
</style>
<div class="translate">触れると横にずれる</div>触れると横にずれる
.セレクタ{
transform:translateX(30px); }
- 指定なしなら(X.Y)です。
- Xなら横軸だけです。プラスは右、マイナスは左です。
- Yなら縦軸だけです。プラスは下、マイナスは上です。
rotate(回転)の使い方
例
<style>
.rotate {
width:100px;
height:100px;
transition-duration: 1s;
background:red;
margin:30px auto 0 auto;
text-align:center;
border-radius: 20px;
}
.rotate:hover { transform:rotate(720deg); }
</style>
<div class="rotate">触れるとまわる</div>触れるとまわる
セレクタ{
transform:rotate(720deg); }
degは角度の単位です。
- 指定なしならプラスは時計回り、マイナスは反時計周りです。
- Xなら横軸を起点に回転
- Yなら縦軸を起点に回転
scale(拡大縮小)の使い方
例
<style>
.scale {
width:100px;
height:100px;
margin:30px auto 0 auto;
text-align:center;
transition-duration: 1s;
background:red;
border-radius: 20px;
}
.scale:hover {
transform:scale(5,3.7);
}
</style>
<div class="scale">触れると巨大化</div>触れると巨大化
セレクタ{
transform:scale(5,3);
(X,Y)で拡大、縮小方向が決められます。
skew(傾斜)の使い方
例
<style>
.skew {
width:100px;
height:100px;
margin:30px auto 0 auto;
text-align:center;
transition-duration: 1s;
background:red;
border-radius: 20px;
}
.skew:hover {
transform:skew(30deg,30deg);
}
</style>
<div class="skew">触れると歪む</div>触れると歪む
{
transform:skew(30deg,30deg);
}
組み合わせても使える
触れるとまわって変化する
例
<style>
.trlate{
width:100px;
height:100px;
transition-duration: 1s;
background:red;
border-radius: 20px;
}
.tr:hover { transform:translateX(200px)rotate(720deg)scale(-1); }
</style>
<div class="tr">触れるとまわって変化する</div>{ transform:translateX(200px)rotate(720deg)scale(-1); }
このように並べて使うこともできます。
まとめ
ちょっと動きがあるだけでだいぶ違いますよね。
コメント