CSS3 - Transform[変形]
Transform[変形]
- transformプロパティは、回転、伸縮、傾斜、移動などの動きを要素に指定する際に使用するCSSプロパティ
transformプロパティの値に指定できる関数
関数名 | 読み方 | 実行効果 |
---|---|---|
translate | トランスレイト | 移動 |
rotate | ローテート | 回転 |
scale | スケール | 伸縮 |
skew | スキュー | 傾斜 |
translateX()
- translateX()を使用することでX軸(横軸)の移動が可能になります
ホバー時に変形
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { line-height: 1.0; } .content { width: 640px; margin: 50px; padding: 30px; border: 1px solid #aaa; } h3 { margin-bottom: 20px; } .container { display: flex; justify-content: flex-start; background: #dffffa; } .box { width: 120px; height: 100px; margin: 20px; padding-top: 20px; background: #4990af; color: #fff; text-align: center; line-height: 1.2; transition: 2s; } /* translate() */ .trans01:hover { transform: translate(30px,0); } .trans02:hover { transform: translate(0,30px); } .trans03:hover { transform: translate(30px,-30px); } /* scale() */ .scale01:hover { transform: scale(0.8, 0.8); } .scale02:hover { transform: scale(0.5, 1); } .scale03:hover { transform: scale(1, 1.5); } /* rotate() */ .rotate01:hover { transform: rotate(45deg); } .rotate02:hover { transform: rotate(-15deg); } .rotate03:hover { transform: rotate(90deg); } /* skew() */ .skew01:hover { transform: skew(30deg, 0); } .skew02:hover { transform: skew(0, 30deg); } .skew03:hover { transform: skew(30deg, 30deg); } </style> </head> <body> <div class="content"> <h3>translate()</h3> <div class="container"> <div class="box">変形なし</div> <div class="box trans01">右へ<br>30px移動</div> <div class="box trans02">下へ<br>30px移動</div> <div class="box trans03">右へ<br>30px<br>上へ<br>30px移動</div> </div><!-- /.container --> </div><!-- /.content --> <div class="content"> <h3>scale()</h3> <div class="container"> <div class="box">変形なし</div> <div class="box scale01">80%に<br>縮小</div> <div class="box scale02">横を半分に<br>縮小</div> <div class="box scale03">縦に1.5倍に<br>拡大</div> </div><!-- /.container --> </div><!-- /.content --> <div class="content"> <h3>rotate()</h3> <div class="container"> <div class="box">変形なし</div> <div class="box rotate01">45度回転</div> <div class="box rotate02">15度逆回転</div> <div class="box rotate03">90度逆回転</div> </div><!-- /.container --> </div><!-- /.content --> <div class="content"> <h3>skew()</h3> <div class="container"> <div class="box">変形なし</div> <div class="box skew01">X軸方向に<br>30度傾斜</div> <div class="box skew02">Y軸方向に<br>30度傾斜</div> <div class="box skew03">X軸・Y軸<br>両方向に<br>30度傾斜</div> </div><!-- /.container --> </div><!-- /.content --> </body> </html>