知っておきたいCSS3アニメーション技術(2)

著者：Eve Cole 更新時間：2025-01-15 16:16:56

翻訳する

「翻訳」という名前は少し誤解を招きます。実際には、X および Y 座標値を使用して要素を配置する方法です。

引用した内容は以下の通りです。

#ナビ{
/* これにより、nav 要素が左に 10 ピクセル、下に 20 ピクセル移動します */
-moz-transform: 変換(10px, 20px);
-webkit-transform: 変換(10px, 20px);
}

ブラウザのサポート

現在、translate 属性は Firefox、Safari、Chrome でのみサポートされており、ブラウザーのプライベートプレフィックス -moz- および -webkit- を使用する必要があります。

スキュー

スキューは、x 軸と y 軸を中心に特定の角度でオブジェクトを傾けることができる便利な変換関数でもあります。これは、要素の形状を変更せずに回転するだけの回転の回転とは異なります。傾斜により要素の形状が変化します。 Skew には 2 つのパラメータがあり、それぞれ x 軸と y 軸の傾きを表します。

引用した内容は以下の通りです。

#ナビ{
/* これにより、nav 要素が左に 10 ピクセル、下に 20 ピクセル移動します */
-moz-transform: スキュー(30度、-10度);
-webkit-transform: スキュー(30度、-10度);
}

ブラウザのサポート

現在、Skew 属性は Firefox、Safari、Chrome でのみサポートされており、ブラウザーのプライベートプレフィックス -moz- および -webkit- を使用します。

マトリックス

はい、行列は行列です。行列は高度な数学では非常に基本的なものであり、CSS 3 では確かに非常に高度な機能です。CSS 3 では、上記のさまざまな効果を非常に柔軟に実現できる行列関数が導入されました。これには 6 つのパラメーター (a、b、c、d、e、f) があり、実際には 3*3 の行列で、古いパラメーターが新しい値に変換されます。

| 安倍 |

| cdf |

| 0 0 1 |

さらに詳しく学びたい場合は、http: //www.w3.org/TR/SVG/coords.html#TransformMatrixDefinedを参照してください。これは SVG 用のドキュメントですが、行列変換の原理は普遍的です。。

例を見てみましょう:

引用した内容は以下の通りです。

#ナビ{
/* nav 要素は右上隅のように傾きます */
-moz-transform: 行列(1, -0.2, 0, 1, 0, 0);
-webkit-transform: 行列(1, -0.2, 0, 1, 0, 0);
}

ブラウザのサポート

幸いなことに、IE はほとんどの CSS3 変換関数をサポートしていませんが、基本的にはこのフィルタを使用して同じ効果を実現できます。ただし、最初に行列演算を理解する必要があります。 Webkit と Firefox (3.5 以降) の両方がこの機能をサポートしています。

チェーンの変形

多くの場合、変換はスタンドアロンですが、複数の変換を同時に使用する場合は、特にプライベート拡張機能を使用すると、コードをすぐに統合できます。幸いなことに、いくつかの略語が組み込まれています。

引用した内容は以下の通りです。

#ナビ{
-moz-transform: 変換(10, 25);
-webkit-transform: 変換(10, 25);
-moz-transform: 回転(90度);
-webkit-transform: 回転(90度);
-moz-transform: スケール(2, 1);
-webkit-transform: スケール(2, 1);
}

これらの変換をチェーンしてコードをより効率的にすることができます。

引用した内容は以下の通りです。

ナビ{
-moz-transform: 移動(10, 25) 回転(90度) スケール(2, 1);
-webkit-transform: 変換(10, 25) 回転(90度) スケール(2, 1);
}

これらの特性の真の力が組み合わされます。 JavaScript を使用せずに、インラインおよびブロックレベルの要素を移動、回転、拡大縮小、制御できます。これらのプロパティのサポートがさらに広範になると、よりリッチで軽量なインターフェイスやアプリケーションを作成できるようになります。

変換元

transform-origin は、transform のサブ関数ではありませんが、transform と非常に密接に関連しています。これは、変換の開始点を指定するために使用できます。たとえば、回転変換のデフォルトの開始点は左上隅または左下隅に設定できます。回転変換は大きく異なる場合があります。

transform-origin は 2 つのパラメータを受け入れます。これらのパラメータは、パーセンテージ、em、px などの特定の値、または左、中央、右、上、中央、下などの説明的なパラメータにすることができます。いくつかの例:

引用した内容は以下の通りです。

.class1{-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
...
}
.class2{-moz-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
...}
.class3{-moz-transform-origin:左上;
-webkit-transform-origin:左上;
...}

ブラウザの互換性

この属性は現在、Webkit と Firefox でのみサポートされており、独自のプライベートプレフィックスを追加する必要があります。