CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3のtransformで実現！要素の2D変換の基本と使い方

2D変換とは？

CSS3の2D変換（2D Transform）は、translate（移動）、rotate（回転）、scale（拡大・縮小）、skew（傾斜）などの関数を使って、HTML要素の位置や形状を自由に変更できる機能です。これらの変換を組み合わせることで、従来はJavaScriptが必要だった視覚効果を、CSSだけで手軽に実現できます。

主な2D変換関数一覧

No.値と説明
1matrix(n,n,n,n,n,n)
6つの値を指定して、行列による変換を定義します。
2translate(x,y)
X軸・Y軸の両方向に沿って要素を移動させます。
3translateX(n)
X軸方向に沿って要素を移動させます。
4translateY(n)
Y軸方向に沿って要素を移動させます。
5scale(x,y)
要素の幅と高さを変更します。
6scaleX(n)
要素の幅を変更します。
7rotate(θ)
要素を指定した角度だけ回転させます。
8skew(x,y)
X軸・Y軸方向に要素を傾けます。

次のコードは、CSS3のtransformプロパティを使って要素を2D変換する具体例です。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
    width: 100px;
    height: 100px;
    background-color: rgb(255, 17, 0);
    border:2px solid black;
    margin: 20px;
    display: inline-block;
    color: white;
}
.rotate {
    transform: rotate(20deg);
}
.translate {
    transform: translate(30px, 20px);
}
.scale {
    transform: scale(2, 1);
    margin-left:70px;
}
.skew {
    transform: skew(20deg);
}
</style>
</head>
<body>
<h1>2D transformation of elements </h1>
<div class="rotate">ROTATE</div>
<div class="skew">SKEW</div>
<div class="scale">SCALE</div>
<div class="translate">TRANSLATE</div>
</body>
</html>

出力結果

CSS3のtransformで実現！要素の2D変換の基本と使い方

このように、同じサイズの正方形でもtransformの値を変えるだけで、回転・移動・拡大・傾斜といった多彩な表現が可能になります。各関数は単独でも、space区切りで複数組み合わせても使用できるため、ボタンのホバーエフェクトやカードUIの演出など、さまざまな場面で活用できます。

  1. CSS3の2D変換関数（transform）の使い方を徹底解説

    CSS3の2D変換（2D transforms）は、要素を移動（translate）・回転（rotate）・拡大縮小（scale）・傾斜（skew）させることで、見た目や配置を自由に変更できる強力な機能です。アニメーションやインタラクティブなデザインにも欠かせないテクニックとして広く使われています。 主な2D変換関数の一覧 以下に、よく使用される代表的な2D変換関数をまとめました。 番号関数と説明 1matrix(n,n,n,n,n,n)6つの値を使って行列（マトリックス）による変換を定義します。すべての変換を1つの関数で表現できます。 2translate(x,y)要素をX軸方向とY

  2. CSS3のword-breakプロパティで改行ルールを指定する方法

    CSS3で改行（ワードブレイク）のルールを指定するには、word-breakプロパティを使用します。このプロパティは、テキストがコンテナの幅を超えた場合に、どのように行を折り返すかを制御するものです。word-breakプロパティに指定できる主な値は以下のとおりです。normal：デフォルトの改行規則に従います。日本語や中国語などのCJK言語では任意の位置で改行されますが、英語などの欧文ではスペースやハイフンがある箇所でのみ改行されます。break-all：言語に関係なく、任意の文字の間で改行を許可します。英語のような単語の途中でも強制的に折り返されるため、幅の狭いコンテナで長い英単語を表示し