CSSで2D変換を実装する方法（例）-CSSチュートリアル-php.cn

CSSで2D変換を実装する方法（例）

不言

リリース： 2018-08-09 16:57:46

オリジナル

2026 人が閲覧しました

この記事の内容は CSS で 2D 変換を実現する方法 (例) です。必要な方は参考にしていただければ幸いです。

スクリプト化された CSS
アニメーション効果は、以下の CSS を通じて実現されます。スクリプト化された CSS を使用して、スケーラブルなリストのスライドインとアウトラインを実現できます。つまり、DHTML という古い用語です

CSS の基本的な知識

前に。分厚い本をすでに読んでいますので、簡単に見て、わからない点をいくつか追加します

スタッキング

Webブラウザは要素のスタイル属性を組み合わせます。スタイルを計算します。

色の透明性と半透明

色は半透明です（エッジが互換性がない理由はわかりません）

スクリプト化されたインラインスタイル

p.style.background = "#FFFFFF"

ログイン後にコピー

つまり、CSSスタイルの追加はjsを通じて行われます

理由としては、 js では文法エラーとみなされるため、 js では一律にキャメルケースの命名方法に変更します。これは習慣です

同様に、属性を直接使用して設定することもできます

e.setAttribute

ログイン後にコピー

でcssのインラインスタイルを設定することもできます

実際、css属性のインラインスタイルを追加することで効果が得られます。つまり、スタイルの値
スタイルの重みはどのスタイルよりも大きいため、意図的に重みを変更しない限り、jsで生成されたスタイルの値は常に機能します。

cssの2d変換

つまり、何らかのcss変換を実行します

座標

座標を記述するシステムには、デカルト座標系と等次座標系があります。

デカルト座標系

は、一連の数値を使用して、一連の平面上の点を表します。その座標は右手の法則です (3 次元で)
詳細 https://en.wikipedia.org/wiki/Cartesian_coowned_system
以下の変換はデカルト座標系に基づいています
点を行列で表すことにより、行列変換 (線形変換) を実行して、対応する結果を取得します。たとえば、乗算変換や加算変換などを実行します。

transform

属性を使用すると、CSS 視覚書式設定モデルの座標空間を変更できます。これを使用すると、要素を移動、回転、拡大縮小、傾斜させることができます。ブロックレベルの要素に対してのみ有効です

原点

には 3 つの値があり、x 軸に 1 つの値、y 軸に 1 つの値、z 軸に 1 つの値があります。
下図のように
CSSで2D変換を実装する方法（例）
それぞれの値を設定することができ、これが回転の原点になります
具体的な値はtransform-originです
初期値が指定されていない場合は、直接継承が使用されます。

デモ

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

rotate 回転

このメソッドは、固定点を中心に要素を回転する方法を定義します。 transform -origin によって変換され、要素の変換の起点を指定します。

単位角度

CSSの基本的なデータ型。角度は、角度の大きさを度 (度) グラジアン (グラジアン) ラジアン (回転) の単位で表します。
deg 度
grad grads (数学を復習してください。角度の測定単位であり、次のように定義されます。円を 400 等分に切り、つまり、直角は 100 度に等しい https://zh.wikipedia.org/wiki/%E7%99%BE%E5%88%86%E5%BA%A6)
rad ラジアン (数学の復習 https: //zh.wikipedia.org/wiki/%E5%BC%A7%E5%BA%A6)
丸数字を回す

構文

数値と単位の間にスペースはありません。数値が0の場合は単位を省略できます。
+ または - 記号で始まります。正の数値は時計回りの角度を表し、負の数値は反時計回りの角度を表します。

いくつかの例

90deg = 100grad = 0.25trun ≈ 1.57rad (π/2にほぼ等しい)
以下のすべての式
CSSで2D変換を実装する方法（例）

回転の説明

CSSで2D変換を実装する方法（例）

css関数scale( )ズームに使用します。要素のサイズを変更するために使用され、ベクトル形式で定義されたスケーリング値によって要素を拡大および縮小します。 sx と sy の 2 つの値があり、結果は 2 つの値に基づいて取得されます。 sy が設定されていない場合、sy の値は sx の値で直接設定されます。単位はCSSデータ型の数値です

このスケーリングはユークリッド平面(二次元平面)での変形のみ対応しています

CSSで2D変換を実装する方法（例）設定されたCSS値は

transform: scale(2, 2);

ログイン後にコピー

この時点で水平面が完成します軸が 2 倍、縦軸が 2 倍になります。

同様に、サイズを小さくすることもできます。

skewスキュー

は、歪んだ2次元平面上でのオリジナルの変更であり、その結果がデータ型です。

剪切映射

css的倾斜为剪切映射,每个点的坐标由与指定角度或成比例的值到原点的距离。对于每个坐标产生矩阵，然后对矩阵进行运算，得出运算后的坐标值。
CSSで2D変換を実装する方法（例）

css的3d转换

坐标

齐次坐标系

由笛卡尔坐标系投影得到。
1. 投影平面中的任何点由三元组（x，y，z）表示，称为点的齐次坐标和投影坐标
2. 如果坐标乘以公因子，则给定的一组齐次坐标点不变
3. 相反，当且仅当通过所有坐标乘以相同的非零常数，从另一个获得一个时，两组齐次坐标表示相同的点
4. 当z不为0时，表示的点为欧几里得的点。
5. 当z为0时表示的点为无穷远处的点