CSS3 2D変換

 

 

CSS3 2D 変形：完全ガイド（入門から応用まで）

魅力的なウェブアニメーションや視覚効果を作成したいと思いませんか？ この記事では、CSS3 2D 変形を使用して、要素の移動、回転、拡大縮小、傾斜などの操作を行う方法を、コード例と実際の応用例を交えながら詳しく解説します。

CSS3 2D 変形とは？

CSS3 2D 変形は、要素の外観を2次元平面上で操作することを可能にする強力な機能です。要素の移動、回転、拡大縮小、傾斜といった操作を、JavaScript を使用せずに CSS だけで実現できます。

2D 変形には、以下のような利点があります。

  • コードがシンプルで分かりやすい
  • パフォーマンスに優れ、ユーザーエクスペリエンスを向上させる
  • JavaScript を使用せずに、CSS だけで実現できる

CSS3 2D 変形関数詳解

CSS3 2D 変形には、様々な関数が用意されています。ここでは、代表的な関数とその使い方について詳しく解説します。

translate()

translate() 関数は、要素を指定した距離だけ移動させるために使用します。X 軸方向と Y 軸方向の移動距離を指定することができます。


transform: translate(x, y);

例：要素を右に 50px、下に 25px 移動させる

<!DOCTYPE html>
<html>
<head>
<style>
.moved-element {
  transform: translate(50px, 25px);
}
</style>
</head>
<body>

<div class="moved-element">この要素は右に50px、下に25px移動します。</div>

</body>
</html>

この例では、moved-elementクラスを持つdiv要素が作成されています。transform: translate(50px, 25px);スタイルがこのクラスに適用されているため、このdiv要素は元の位置から右に50ピクセル、下に25ピクセル移動します。

重要なポイント

  • translate()は、要素を移動させるためのCSS transformプロパティの値の1つです。

  • 最初の値（この場合は50px）は水平方向の移動量、2番目の値（この場合は25px）は垂直方向の移動量を表します。

  • 正の値はそれぞれ右と下への移動、負の値はそれぞれ左と上への移動を表します。

rotate()

rotate() 関数は、要素を指定した角度だけ回転させるために使用します。回転方向は、正の値で時計回り、負の値で反時計回りになります。


transform: rotate(angle);

例：要素を時計回りに 45 度回転させる


transform: rotate(45deg);

scale()

scale() 関数は、要素を指定した倍率で拡大縮小するために使用します。X 軸方向と Y 軸方向の倍率を別々に指定することができます。


transform: scale(x, y);

例：要素の幅を 2 倍に、高さを半分にする


transform: scale(2, 0.5);

skew()

skew() 関数は、要素を指定した角度だけ傾斜させるために使用します。X 軸方向と Y 軸方向の傾斜角度を別々に指定することができます。


transform: skew(x-angle, y-angle);

例：要素を X 軸方向に 20 度傾斜させる


transform: skew(20deg, 0);

matrix()

matrix() 関数は、2D 変換行列を直接指定することで、より複雑な変形を行うことができます。他のすべての 2D 変形関数は、実際にはこの matrix() 関数を使って実現されています。


transform: matrix(a, b, c, d, e, f);

各パラメータの意味は以下の通りです。

パラメータ 説明
a 水平方向のスケール
b 垂直方向のスキュー
c 水平方向のスキュー
d 垂直方向のスケール
e 水平方向の移動距離
f 垂直方向の移動距離

例：要素を時計回りに 30 度回転させ、同時に X 軸方向に 2 倍、Y 軸方向に 0.5 倍に拡大縮小する


transform: matrix(1.732, 1, -1, 1.732, 0, 0);

CSS3 2D 変形の応用场景

CSS3 2D 変形は、以下のような様々な場面で応用することができます。

リストアップした項目について、具体的にどのようにtransformプロパティを使って実現できるのか、コード例を交えながら解説します。

1. マウスホバー時の要素の拡大、回転、色変化

<div class="box">ホバー</div>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition: transform 0.3s ease, background-color 0.3s ease; /* 滑らかな変化 */
}

.box:hover {
  transform: scale(1.2) rotate(20deg); /* 1.2倍に拡大、20度回転 */
  background-color: lightcoral;
}
</style>

解説：

  • transitionプロパティで、transformとbackground-colorの変化を0.3秒かけて滑らかにするように設定しています。

  • :hoverを使って、マウスホバー時にtransformとbackground-colorが変化するように設定しています。

2. ページ読み込み時の要素のスライドイン

<div class="slide-in">スライドイン</div>
<style>
.slide-in {
  width: 200px;
  height: 100px;
  background-color: lightgreen;
  transform: translateX(-100%); /* 初期状態は画面外 */
  animation: slideIn 1s ease forwards; /* アニメーション設定 */
}

@keyframes slideIn {
  to {
    transform: translateX(0); /* 左からスライドイン */
  }
}
</style>

解説：

  • transform: translateX(-100%);で初期状態を画面外（左端）に設定します。

  • animationプロパティで、slideInというアニメーションを1秒かけて、easeのタイミング関数で実行するように設定しています。

  • @keyframesでslideInアニメーションの内容を定義し、translateX(0)で最終的に元の位置に表示されるようにしています。

3. 回転するカルーセル

カルーセルは、複数の要素をスライドショーのように表示するUI要素です。JavaScriptと組み合わせることで実現できますが、ここではtransformプロパティを使った基本的な回転アニメーションの例を示します。

<div class="carousel">
  <div class="item">アイテム1</div>
  <div class="item">アイテム2</div>
  <div class="item">アイテム3</div>
</div>
<style>
.carousel {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: lightpink;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: rotateCarousel 6s linear infinite; /* アニメーション設定 */
}

.item:nth-child(2) {
  animation-delay: 2s; /* 2秒遅らせて開始 */
}

.item:nth-child(3) {
  animation-delay: 4s; /* 4秒遅らせて開始 */
}

@keyframes rotateCarousel {
  0% { transform: translateX(0); }
  33.33% { transform: translateX(-100%); }
  66.66% { transform: translateX(-200%); }
  100% { transform: translateX(0); }
}
</style>

解説：

  • 各アイテムは絶対配置で、animationプロパティでrotateCarouselアニメーションを実行するように設定しています。

  • animation-delayで各アイテムのアニメーション開始時間をずらすことで、順番に表示されるようにしています。

  • @keyframesでrotateCarouselアニメーションの内容を定義し、translateXを使って横にスライドさせています。

4. レスポンシブデザイン

transformプロパティ自体は画面サイズに合わせて要素のサイズや位置を調整するものではありませんが、メディアクエリと組み合わせることで、レスポンシブなレイアウトを実現できます。

@media screen and (max-width: 768px) {
  .box {
    transform: scale(0.8); /* 画面幅768px以下で要素を80%に縮小 */
  }
}

5. 視覚効果

transformプロパティでは、2D変形だけでなく、3D変形も可能です。

<div class="card">
  <div class="front">表</div>
  <div class="back">裏</div>
</div>
<style>
.card {
  width: 200px;
  height: 100px;
  perspective: 600px; /* 奥行きを表現 */
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 裏面を非表示 */
  transition: transform 0.5s; /* 滑らかな反転 */
}

.front {
  background-color: lightblue;
}

.back {
  background-color: lightcoral;
  transform: rotateY(180deg); /* 初期状態は180度回転 */
}

.card:hover .front {
  transform: rotateY(-180deg); /* ホバーで表を反転 */
}

.card:hover .back {
  transform: rotateY(0deg); /* ホバーで裏を表示 */
}
</style>

解説：

  • perspectiveプロパティで奥行きを表現し、backface-visibility: hidden;で要素の裏側を非表示にしています。

  • rotateYを使って要素をY軸を中心に回転させています。

  • マウスホバー時にtransformプロパティで要素を回転させて、カードがひっくり返るようなアニメーションを実現しています。

ブラウザ対応状況

CSS3 2D 変形は、主要なブラウザで広くサポートされています。ただし、古いブラウザでは、ベンダープレフィックスが必要になる場合があります。

ブラウザ ベンダープレフィックス
Chrome -webkit-
Safari -webkit-
Firefox -moz-
IE 9+ -ms-
Opera -o-

まとめ

CSS3 2D 変形は、ウェブページに動的でインタラクティブな要素を追加するための強力なツールです。この記事で紹介した関数や応用例を参考に、ぜひご自身のウェブサイトで活用してみてください。

参考文献

よくある質問

Q1: CSS3 2D 変形と 3D 変形の違いは何ですか？

2D 変形は要素を2次元平面上で操作するのに対し、3D 変形は要素を3次元空間上で操作することができます。3D 変形を使用すると、奥行きや perspective を表現することができます。

Q2: CSS3 2D 変形のパフォーマンスは？

CSS3 2D 変形は、ブラウザのハードウェアアクセラレーションを利用するため、比較的高いパフォーマンスで動作します。ただし、複雑な変形やアニメーションを多数使用する場合には、パフォーマンスに影響が出る可能性があります。

Q3: CSS3 2D 変形を学ぶためのリソースは？

MDN Web Docs や W3Schools などのウェブサイトで、CSS3 2D 変形について詳しく学ぶことができます。また、CodePen などのコードシェアサイトでは、他の開発者が作成した CSS3 2D 変形のサンプルコードを見つけることができます。