この記事の内容は 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
以下の変換はデカルト座標系に基づいています
点を行列で表すことにより、行列変換 (線形変換) を実行して、対応する結果を取得します。たとえば、乗算変換や加算変換などを実行します。
属性を使用すると、CSS 視覚書式設定モデルの座標空間を変更できます。これを使用すると、要素を移動、回転、拡大縮小、傾斜させることができます。 ブロックレベルの要素に対してのみ有効です
には 3 つの値があり、x 軸に 1 つの値、y 軸に 1 つの値、z 軸に 1 つの値があります。
下図のように
それぞれの値を設定することができ、これが回転の原点になります
具体的な値はtransform-originです
初期値が指定されていない場合は、直接継承が使用されます。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin
このメソッドは、固定点を中心に要素を回転する方法を定義します。 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値は
transform: scale(2, 2);
この時点で水平面が完成します軸が 2 倍、縦軸が 2 倍になります。
同様に、サイズを小さくすることもできます。
skewスキュー
css的倾斜为剪切映射,每个点的坐标由与指定角度或成比例的值到原点的距离。对于每个坐标产生矩阵,然后对矩阵进行运算,得出运算后的坐标值。
由笛卡尔坐标系投影得到。
1. 投影平面中的任何点由三元组(x,y,z)表示,称为点的齐次坐标和投影坐标
2. 如果坐标乘以公因子,则给定的一组齐次坐标点不变
3. 相反,当且仅当通过所有坐标乘以相同的非零常数,从另一个获得一个时,两组齐次坐标表示相同的点
4. 当z不为0时,表示的点为欧几里得的点。
5. 当z为0时表示的点为无穷远处的点
围绕x轴进行旋转
ps;设置的原点值为center
即
transform-origin:center;
rotateY()同理
3d组合不可进行交换,如果进行交换会导致出现不同的效果。
相关推荐:
以上がCSSで2D変換を実装する方法(例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。