コメント：CSS3を使用して3Dテトラヘドロンを作成する方法に関する記事を読みました。私はそれがかなり良いと思ったので、私はそれを取り出して、Div+CSSを使用して三角形を作成する方法をあなたと共有しました。ここで私は最初に関連するコードを貼り付けてから、あなたに原則を説明します
今日、私はCSS3を使用して3Dテトラヘドロンを作成する方法に関する記事を読みました。私はそれがかなり良いと思ったので、私はそれを取り出してあなたと共有しました。最初に共有したいのは、Div+CSSを使用して三角形を作成する方法です。ここでは、最初に関連するコードを貼り付けてから、原則を説明します。
HTML：
<div>
<div> </div>
</div>
CSS：
<style type = "text/css">
#pyramid {
位置：相対;
マージン：100px Auto;
高さ：500px;
幅：100px;
}
#pyramid> div {
位置：絶対;
ボーダースタイル：ソリッド;
境界線：200px 0 200px 346px;
}
#pyramid> div：後{
位置：絶対;
コンテンツ：「三角形」;
色：#ffff;
左：-250px;
テキストアライグ：センター;
}
#pyramid> div：first-child {
境界線：＃FF0000透明＃FF0000 RGBA（50、50、50、0.6）;
}
</style>
ランニング効果：
原則分析：
HTMLコードでは、2つのdivを定義します。外側divはコンテナオブジェクトであり、内側のdivは三角形を生成するために使用されます。 CSSコードでは、内部divの幅と高さを設定するのではなく、境界の3つのエッジの幅（上、下、左）のみを設定します。 3つの側面に異なる色を設定することにより、それらはそれぞれ3つの異なる三角形になります。
この時点では、上部と下側の色を透明な色に設定するだけで、正三角形が表示されます。
#pyramid> div：first-child {
境界線：透明な透明な透明RGBA（50、50、50、0.6）;
}
複製画像：
その中で、赤い円に示されている場所は、内部divがある場所です。彼は幅が0、高さ0の目に見えないオブジェクトですが、実際には存在します。
次に説明するのは、3Dテトラヘドロンを実装する方法とアニメーションを作成する方法です。
まず、関連するコードを貼り付けます。
HTML：
<div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
CSS：
<style type = "text/css">
#pyramid {
位置：相対;
マージン：100px Auto;
高さ：500px;
幅：100px;
-webkit-transform-style：preserve-3d;
-webkit-animation：スピン10S線形無限。
-webkit-transform-origin：116px 200px 116px;
-moz-transform-style：preserve-3d;
-moz-animation：スピン10s線形無限。
-moz-transform-origin：116px 200px 116px;
-ms-transform-style：preserve-3d;
-ms-alimation：スピン10s線形無限。
-ms-transform-origin：116px 200px 116px;
変換スタイル：preserve-3d;
アニメーション：スピン10s線形無限。
変換オリジン：116px 200px 116px;
}
@-webkit-keyframesスピン{
から {
-webkit-transform：rotatex（0deg）rotatey（0deg）rotatez（0deg）;
}
に {
-webkit-transform：rotatex（360deg）rotatey（360deg）rotatez（360deg）;
}
}
@-moz-keyframesスピン{
から {
-moz-transform：rotatex（0deg）rotatey（0deg）rotatez（0deg）;
}
に {
-moz-transform：rotatex（360deg）rotatey（360deg）rotatez（360deg）;
}
}
@-ms-keyframesスピン{
から {
-ms-transform：rotatex（0deg）rotatey（0deg）rotatez（0deg）;
}
に {
-ms-transform：rotatex（360deg）rotatey（360deg）rotatez（360deg）;
}
}
@KeyFramesスピン{
から {
変換：Rotatex（0DEG）ROTATEY（0DEG）ROTATEZ（0DEG）;
}
に {
変換：rotatex（360deg）rotatey（360deg）rotatez（360deg）;
}
}
#pyramid> div {
位置：絶対;
ボーダースタイル：ソリッド;
境界線：200px 0 200px 346px;
-webkit-transform-origin：0 0;
-moz-transform-origin：0 0;
-ms-transform-origin：0 0;
変換オリジン：0 0;
}
#pyramid> div：後{
位置：絶対;
コンテンツ：「三角形」;
色：#ffff;
左：-250px;
テキストアライグ：センター;
}
#pyramid> div：first-child {
境界線：透明な透明な透明RGBA（50、50、50、0.6）;
-webkit-transform：rotatey（-19.5deg）rotatex（180deg）translatey（-400px）;
-moz-transform：rotatey（-19.5deg）rotatex（180deg）translatey（-400px）;
-ms-transform：rotatey（-19.5deg）rotatex（180deg）translatey（-400px）;
変換：rotatey（-19.5deg）rotatex（180deg）translatey（-400px）;
}
#pyramid> div：nth-child（2）{
境界線：透明な透明な透明RGBA（50、50、50、0.6）;
-webkit-transform：rotatey（90deg）rotatez（60deg）rotatex（180deg）translatey（-400px）;
-moz-transform：rotatey（90deg）rotatez（60deg）rotatex（180deg）translatey（-400px）;
-ms-transform：rotatey（90deg）rotatez（60deg）rotatex（180deg）translatey（-400px）;
変換：Rotatey（90Deg）Rotatez（60Deg）Rotatex（180Deg）Translatey（-400px）;
}
#pyramid> div：nth-child（3）{
境界線：透明な透明な透明なRGBA（50、50、50、0.9）;
-webkit-transform：rotatex（60deg）rotatey（19.5deg）;
-moz-transform：rotatex（60deg）rotatey（19.5deg）;
-ms-transform：rotatex（60deg）rotatey（19.5deg）;
変換：Rotatex（60Deg）Rotatey（19.5Deg）;
}
#pyramid> div：nth-child（4）{
境界線：透明な透明な透明RGBA（50、50、50、0.8）;
-webkit-transform：rotatex（-60deg）rotatey（19.5deg）translatex（-116px）translatey（-200px）translatez（326px）;
-moz-transform：rotatex（-60deg）rotatey（19.5deg）translatex（-116px）translatey（-200px）translatez（326px）;
-ms-transform：rotatex（-60deg）rotatey（19.5deg）translatex（-116px）translatey（-200px）translatez（326px）;
変換：rotatex（-60deg）rotatey（19.5deg）translatex（-116px）translatey（-200px）translatez（326px）;
}
</style>
ここで、関連するコードの説明を開始します。
HTMLコードは前のコードに似ています。つまり、3つの追加DIVがあり、四面体の他の3つの側面として使用されます。
CSSコードでは、＃Pyramid> Div：nth-Child（n）を使用して、三面の4つの面を見つけ、境界の4つの側面の色を設定し、それぞれ三角形に定義します。 Transform AttributeのRotatex、Rotatey、Translatex、Translatey、およびTranslatezメソッドを介して、角度、方向、および位置を3D空間で設定します。これには多くの数学的知識が含まれ、誰もが関連する知識を補う必要があります。
上記の配置により、四面体が形成されます。次は、アニメーション効果を追加することです。ここで使用されるものも非常にシンプルです。つまり、アニメーションとキーフレームです。サイトでCSS3に関連するプロパティを学ぶことができるので、ここではあまり説明しません。
この記事のこの時点で、HTMLとCSSコードを一緒に貼り付けて最終効果を確認できます。
あなたが理解していないコードに何かがあるので、あなたは私にメッセージを残すことができます。