CSS 3d_html/css_WEB-ITnose

初めて CSS3 に触れたときは、CSS の各属性の意味が分からないことが多く、時間をかけて調べたり試したりしました。今でもよくブログにアクセスします。 CSS で遊んで Flex をすぐに覚えたときのように、よく Flex の使い方を確認しに行きました... 今回は寒波を利用して、自宅で簡単な CSS 3D サンプルを作成しました。外に出たくなかった。

CSS 3D

CSS 3D 効果を作成する場合、まず要素の 2 つのレイヤーを想像できます。外側のレイヤーは三人称視点から内側のレイヤーを見る視点であり、内側のレイヤーはオブジェクト自体であり、さまざまな 3D プロパティ (回転、変位など) を持つことができます。

HTML 構造は次のとおりです:

<div class="perspective"> <!-- 外層視角 -->  <div class="box"> <!-- 物件本身 -->  <div></div>

CSS 属性に関して、外側のレイヤーは、第三者からオブジェクトまでの距離であるパー​​スペクティブ属性を提供します。値は、最初に 500px ~ 1000px にすることができます (これは責任を負いません)。研究、通常はこれが開始点です) スタイル効果はそれほど悪くありません); オブジェクト自体が 3D モードで表示されるように、内部属性には transform-style:preserve-3d を含める必要があり、transform 属性を追加することで、基本的なCSS 3Dが完成します。

CSS の構造は次のとおりです:

.perspective {  perspective: 500px;}.box {  transform-style: preserve-3d;  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}

次に、実践的な遊びを通して、外側の層と内側の層の属性値を調整して、遠近感と変形が相互に及ぼす影響を理解します。

遠近感の値が非常に小さい場合、私たちが物体を見るときと同じように、私たちは通常、一定の距離を保ち、あまり近くを見ません。

2016年の冬…

外に出たくない気温はどのくらいでしょう… 高雄では10度を下回ることはほとんどありませんが、8度を下回ると、外出しなければなりません。ダウンジャケットが下がったら、布団の中に隠れてしまいます。

この体性感覚スケールは… 松の冬を思い出させます。