こんにちは、けいすけです。
今回は、transformプロパティの動作について、transitionプロパティでアニメーション機能を付けつつ紹介したいと思います。
transformができる4つの動作
transformは、主に以下の4つの動作をするために用いられ、値には関数を使用します。
- 移動：translate()
- 回転：rotate()
- 拡大縮小：scale()
- 歪曲：skew()
また、transformは、transitionによって、アニメーション機能を実装するときにもよく使われます。
今回は、transitionでアニメーションの所要時間を1秒に設定しつつ、transformの動作について紹介していきたいと思います。
| プロパティ | 説明 |
|---|---|
| transition | アニメーションの効果を適用するプロパティ、所要時間、加速曲線や、遅延時間などを指定できる |
移動：translate()
移動させるときは、translate()を使用します。
| 関数 | 説明 |
|---|---|
| translate() | 2次元平面上で移動する |
| translateX() | X軸方向に移動する |
| translateY() | Y軸方向に移動する |
| translateZ() | Z軸方向に移動する |
| translate3d() | 3次元平面上で移動する |
transform: translate(100px, 0);として、アニメーションさせると次のようになります。
右方向に100px移動することがわかります。
アニメーションを確認するには、下のボックスをマウスホバーまたは、タップしてください。HTML
<div class="wrapper">
<div></div>
</div>
CSS
.wrapper {
width: 100px;
height: 100px;
position: relative;
}
.wrapper div {
position: absolute;
display: block;
width: 100px;
height: 100px;
background-color: seagreen;
transition: 1s;
}
.wrapper:hover div {
transform: translate(100px, 0);
}
回転：rotate()
回転させるときは、rotate()を使用します。
| 関数 | 説明 |
|---|---|
| rotate() | 2次元平面上で特定の点を中心に回転する |
| rotateX() | X軸を中心に回転する |
| rotateY() | Y軸を中心に回転する |
| rotateZ() | Z軸を中心に回転する |
| rotate3d() | 3次元平面上で特定の軸を中心に回転する |
transform: rotate(270deg);として、アニメーションさせると次のようになります。
時計回りに270度回転していることがわかります。ちなみにdegとは、degreesの略で度のことです。
HTML
<div class="wrapper">
<div></div>
</div>
CSS
.wrapper {
width: 100px;
height: 100px;
position: relative;
}
.wrapper div {
position: absolute;
display: block;
width: 100px;
height: 100px;
background-color: seagreen;
transition: 1s;
}
.wrapper:hover div {
transform: rotate(240deg);
}
拡大縮小：scale()
拡大縮小させるときは、scale()を使用します。
| 関数 | 説明 |
|---|---|
| scale() | 2次元平面上で拡大縮小する |
| scaleX() | X軸方向に拡大縮小する |
| scaleY() | Y軸方向に拡大縮小する |
| scaleZ() | Z軸方向に拡大縮小する |
| scale3d() | 3次元平面上で拡大縮小する |
transform: scale(2, 1);として、アニメーションさせると次のようになります。
X軸方向の大きさが2倍の大きさになることがわかります。
アニメーションを確認するには、下のボックスをマウスホバーまたは、タップしてください。HTML
<div class="wrapper">
<div></div>
</div>
CSS
.wrapper {
width: 100px;
height: 100px;
position: relative;
}
.wrapper div {
position: absolute;
display: block;
width: 100px;
height: 100px;
background-color: seagreen;
transition: 1s;
}
.wrapper:hover div {
transform: scale(2, 1);
}
歪曲：skew()
歪曲させるときは、skew()を使用します。
| 関数 | 説明 |
|---|---|
| skew() | 2次元平面上で歪ませる |
| skewX() | X軸方向に歪ませる |
| skewY() | Y軸方向に歪ませる |
transform: skew(45deg, 0);として、アニメーションさせると次のようになります。（
左右の辺の傾きが、45度になることがわかります。
アニメーションを確認するには、下のボックスをマウスホバーまたは、タップしてください。HTML
<div class="wrapper">
<div></div>
</div>
CSS
.wrapper {
width: 100px;
height: 100px;
position: relative;
}
.wrapper div {
position: absolute;
display: block;
width: 100px;
height: 100px;
background-color: seagreen;
transition: 1s;
}
.wrapper:hover div {
transform: skew(45deg, 0);
}
組み合わせ
transformは、一つの要素に対して、それぞれの動作を組み合わせて使用することが可能です。
その場合は、複数の関数をtransform: translateY(25px) rotate(45deg);のように並べて記載します。
組み合わせて使用することで、下に設置してあるような、クリックするとクローズボタンになるハンバーガーメニューボタンが、作れるようになったりします。
なお、こちらは、チェックボックスを用いて、CSSだけで作っています。
アニメーションを確認するには、下のボックスをクリックまたは、タップしてください。HTML
<input type="checkbox" id="btn">
<label class="wrapper" for="btn">
<span></span>
<span></span>
<span></span>
</label>
CSS
input {
opacity: 0;
display: block;
width: 1px;
height: 1px;
}
.wrapper {
border: 1px solid #ddd;
position: relative;
display: block;
overflow: hidden;
cursor: pointer;
}
span {
display: block;
height: 5px;
width: 80px;
margin: 20px auto 0;
border-radius: 40px;
background: #333;
transition: 1s;
}
input:checked+.wrapper span:nth-child(1) {
transform: translateY(25px) rotate(45deg);
}
input:checked+.wrapper span:nth-child(2) {
transform: translateX(100px);
}
input:checked+.wrapper span:nth-child(3) {
transform: translateY(-25px) rotate(-45deg);
}
まとめ
transformは、移動、回転、拡大縮小、歪曲の4つの動作ができ、それらは、組み合わせることで様々な動きを実現することができます。
いろいろ試してみると面白いかもしれません。
