CSS を使用して三角形を作成する CSS3 を使用して 3D 四面体の原理とコードを作成する (html5 演習)_html5 チュートリアル スキル

今日は CSS3 を使用して 3D 四面体を作成する方法に関する記事を読み、とても良いと思ったので共有します。
最初に皆さんと共有したいのは、div CSS を使用して三角形を作成する方法です。ここでは、最初に関連するコードを貼り付けてから、原理を説明します。
html:

コードをコピーします

コードは次のとおりです:

css >:

コードをコピーコードは次のとおりです:

位置: 相対;
高さ: 500px;
#pyramid > div {
位置: 絶対;
ボーダー幅: 200px 0 200px 346px; 🎜>位置: 絶対;
色: #fff;
テキスト整列:
}
; div:first-child {
ボーダーカラー: #ff0000 透明 #ff0000 rgba(50, 50, 50, 0.6);



操作効果
:



原理分析
:
HTML コードでは、2 つの div を定義します。外側の div はコンテナー オブジェクトです。内側の div は三角形を生成するために使用されます。 CSS コードでは、内部 div の幅と高さを設定せず、境界線の 3 辺 (上、下、左) の幅のみを設定しました。 3つの辺に異なる色を与えると、異なる3つの三角形になります。
この時は単純に上下の色を透明色にするだけで正三角形が現れます。

コードをコピーします
コードは次のとおりです:
#pyramid > first-child {
border-color: 透明 透明 透明 rgba(50, 50, 50, 0.6)
}

レンダリング:

赤丸で示した場所が内側のdivの位置です。彼は幅0、高さ0の目に見えない物体ですが、実際に存在します。 次に説明するのは、3D 四面体の実装方法とアニメーションの作成方法です。 まず、関連するコードを貼り付けます。

html:

コードをコピー

コードは次のとおりです:

< ;div id ="ピラミッド">

div>

コードは次のとおりです:

现在开始相关代码的讲解。
html代码和之前的差不多，就是多了三个div，分别作为四面体的另外三个面。
css代码中，我们使用 #pyramid > div:nth-child(n) 寻找到三面体的四个面，设置border四个边的颜色，将他们分别定义成三角形。通过transform属性的rotateX，rotateY，translateX，translateY和translateZ方法，设置他们在3维空间中的角度、朝向和位置。这里涉及到很多数学知识，大家需要去补充相关知识。

通过上述设置，四面体就形成了。接下来就是为其添加动画效果。这里使用的东西也很简单，就是animation和keyframes。css3相关属性，大家可以到http://www.w3schools.com/css3/default.asp站点去学习，我这里就不做过多讲解了。

本文到此为止，大家可以把html和css代码粘贴在一起，查看最终效果。
代码里面有不懂的内容，大家可以给我留言。