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); }
このように並べて使うこともできます。
まとめ
ちょっと動きがあるだけでだいぶ違いますよね。
コメント