Web白描

CSS3 - Transform［変形］

★CSS3

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>