CSS3 は、要素の 2D 平面変換と視覚的な 3D 空間変換を実装します。2D 変換はより頻繁に使用される可能性があり、3D 効果もケーキの上のアイシングになります。 軸について 座標軸については中学校の幾何学で学び始めました。最も基本的なものは平面直交座標系 CSS やデバイス関連の開発では、基本的に次の座標系に従います。携帯電話の画面を例にとると、座標系のドットは画面の左上隅にあります。x軸は水平で、右方向が正方向です。y軸は垂直で、下方向が正方向です。z軸は画面の平面全体に垂直で、外方向が正方向で、画面の光が目に向かう方向です。 図に示すように: 2D変換 移動 平行移動(x,y) 変換操作には 例えば: div { /*要素は右に 50px、下に 60px 移動します*/ 変換: translateX(50px); 変換: translateY(60px); } /* 省略形、効果は同じ */ div { 変換: translate(50px, 60px); } 回転(度) 要素が回転します。括弧内のパラメータは回転角度です。時計回りは正の値、反時計回りは負の値です。単位は 例えば: div { /* 時計回りに30°回転 */ 変換: 回転(30度); } スケール(x,y) スケーリング要素の場合、パラメータは、 例えば: div { /* 水平方向に半分に縮小し、垂直方向に 2 倍に拡大します */ 変換: スケール(.5, 2); } div { /* 3倍に拡大*/ 変換: スケール(3); } skew(xdeg,ydeg) 水平方向と垂直方向の傾斜角度を表す 例えば: div { 変換: skewX(30deg); 変換: skewY(45度); } /* 略語 */ div { 変換: skew(30deg, 45deg); } 要素が長方形の場合、 上で説明した画面座標系に基づいて覚えることができます。x 軸は画面の上部にあり、右を指しています。y 軸は画面の左側にあり、下を指しています。 skewX(30deg)の効果: skewY(30deg)の効果: 行列(a,b,c,d,e) これは包括的なプロパティです。これまでの平行移動、拡大縮小、回転、傾斜はすべてこの行列関数によって実現できます。そう、大学の線形代数における行列 T_T です。 実は、この関数は前の 4 つの操作の原理に基づいています。この関数には 6 つのパラメータがあり、4 つの操作はパラメータを変更するさまざまな方法に対応しています。数学を専攻していない人のために、原理の詳細については説明しません。前の操作は基本的に十分です (興奮を見つけたい場合は、Baidu の「css マトリックス」にアクセスしてください)~~; 3D変換 いわゆる 3D とは、以前の 2D 平面にZ 軸を追加することです。方法の名前は似ていますが、3 つの軸を使用して変換することで、3 次元効果を実現できます。 すべての 3D ハウツーをご覧ください: 3D座標を平行移動(x,y,z) 空間座標系と上記の x 軸、 y 軸、 z 軸の位置を組み合わせると、 3 つのパラメータは 3 つの座標軸方向の要素の移動値に対応し、 例: div { 変換: translateX(50px); 変換: translateY(60px); 変換: translateZ(70px); } /* 略語 */ div { 変換: translate3d(50px, 60px, 70px); } 注: 3D回転(x,y,z,度) パラメータ これには 回転方向については、物理学の左手の法則に似た判定方法を採用しています。角度を正に指定すると、左手の親指が 4 本の指に対して垂直になり、親指は要素が回転する座標軸またはカスタム軸を指し、4 本の指が曲がる方向が回転方向になります。 例: div { 変換: rotateX(30deg); 変換: rotateY(30deg); 変換: rotataZ(30deg); } /* カスタム軸回転 */ div { 変換: rotate3d(10, 10, 10, 30deg); } rotateX(30deg)の効果: rotateY(30deg)の効果: ここで回転が期待どおりに行かず縮小する理由については、主に視点が設定されていないことが原因ですが、これについては後で説明します。 スケール3d(x,y,z) div { 変換: scaleX(2); 変換: scaleY(2); 変換: scaleZ(2); } /* 略語 */ div { 変換: scale3d(2, 2, 2); } ここで、 例: 体 { 視点:500; } div { /* この順序に従う必要があります。最初にズームしてから移動します。そうしないと効果がありません。*/ 変換: scaleZ(2) translateZ(100px); } 上記のスタイルに従うことによってのみ、 マトリックス3D() 先ほどの2D 視点 上記の例では、Z軸の移動と拡大縮小は通常、目に見える効果はありません。これは、パースペクティブと呼ばれるこの属性値が不足しているためです。この用語はアートやデザインで使用され、オブジェクトが近くにあるときは大きく、離れているときは小さくなる効果を実現します。離れるほど小さくなり、最終的にはパースペクティブポイントであるポイントまで小さくなります。 効果を確認するには、パースペクティブ効果を適用する要素の親要素のスタイルでこのプロパティを設定する必要があることに注意してください。次に例を示します。 体 { 視点:500; /* ブラウザの互換性を考慮する*/ -webkit-perspective: 500; } 次の形式で要素自体に設定することもできます。 div { 変換: 視点(500); -webkit-transform: パースペクティブ(500); } rotateX(45deg) のよりリアルな効果: rotateY(45deg)の効果: 視点の起源 この項目は、視点の位置を設定します。デフォルトでは、要素の幾何学的中心にあります。設定する必要がある場合、形式は次のようになります。 体 { /* デフォルトの中心 */ 視点の原点: 中心 中心; /* 左上隅 */ 視点の原点: 左上; /* 右中央 */ 視点の原点: 右中央; /* 下中央 */ 視点の原点: 中央下; /* 長さも指定可能*/ パースペクティブ原点: 30px 40px; /*最後に、-webkit- 互換性を追加することを忘れないでください*/ } 視点原点の効果: 左中央: perspective-origin: right center の効果: 背面の可視性 翻訳すると、裏面が見えるかどうかを意味します。 backface-visibility: visible の効果: backface-visibility: hidden の効果 (回転は発生しますが、裏面は見えないため、見えません): その他のプロパティ 変換元 2D/3D 変更のベンチマークを設定します。長さの値、または div { /* 要素の左上隅を軸に回転します */ 変換の原点: 左上; 変換: 回転(30度); } 変換スタイル 要素が 3D 空間でネストされた要素をどのように表示するかを設定します。オプションは ここでは、次のように理解できます。以前は、要素を変換するときに、画面が配置されている平面の座標系に基づいて変換していました。ただし、要素に子要素がある場合は、 #親 { 変換スタイル: 3D を保持します。 -webkit-transform-style: 3d を保存します。 変換: perspective(500) rotateY(45deg); -webkit-transform: perspective(500) rotateY(45deg); } #子供 { 変換: perspective(500) rotateX(45deg); -webkit-transform: perspective(500) rotateX(45deg); } フラットの効果: preserve-3dの効果: たとえば、親要素が x 軸を中心に 45 度回転し、 最後に、上記のすべての機能にブラウザ互換のプレフィックスを追加することを忘れないでください。 ちなみに、上記の機能を組み合わせた効果を示すデモページはこちらです。以下をクリックしてください: CSS 3D 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Django プロジェクトを作成して MySQL に接続する方法
>>: dockerにmysqlをインストールした後にNavicatが接続できない問題に対する完璧な解決策
元データと対象データSQL文を実装する(最大) 選択 店、 月、 最大(dz,fz,sp) が最大値...
目次総合的な比較アクティブの観点から機能的な観点から詳細な比較1. エース2. コードミラー3. モ...
nginx ログは filebeat によって収集され、logstash に渡され、logstash...
タイマー効果: <div> <font id='timeCount'...
目次1. 覚えておくべき知識1. 変数タイプ2. シェル変数の説明3. シングルクォート、ダブルクォ...
rpmインストールパッケージを使用してmysqlをオフラインでインストールします。参考までに準備:公...
Firefox は、多くの拡張機能とプラグインを備えた、よく使用されるブラウザです。IE に比べて多...
1. データ整合性の概要1. データ整合性の概要データの冗長性とは、データベース内に重複したデータが...
コードサンプルヘッドタグにコード行を追加します: XML/HTML コードコンテンツをクリップボード...
1. 環境: CentOS7、OpenSSL1.1.1k。 2. コンセプト:ルート証明書: サーバ...
成果を達成する 実装コードhtml <div class="wrapper"...
目次1. トランザクションとは何ですか? 2. トランザクションに関連するステートメントは、挿入、削...
現在、インターネット上でウェブサイトをコピーすることは非常に一般的です。では、他人が私たちのウェブサ...
目次負荷分散に nginx を使用するための 2 つのモジュール:アップストリームはロードノードプー...
目次方法1: 関数を直接呼び出す方法2: provide / inject (静的更新) を使用する...