CSSで2D変換を実装する方法(例)

不言
リリース: 2018-08-09 16:57:46
オリジナル
2020 人が閲覧しました

この記事の内容は 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で2D変換を実装する方法(例)

css的3d转换

坐标

齐次坐标系

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

rotateX()

围绕x轴进行旋转
CSSで2D変換を実装する方法(例)
ps;设置的原点值为center

transform-origin:center;
ログイン後にコピー

rotateY()同理

3d组合不可进行交换,如果进行交换会导致出现不同的效果。

相关推荐:

css3如何实现自定义滚动条样式?(代码)

在页面中怎么用css让图片有立体感的效果?(代码实测)


以上がCSSで2D変換を実装する方法(例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
2d
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート