純粋なCSS3ボックス3Dネットワークの生産は熱い言葉を赤

シンプルで熱い言葉2019のネットワークをコンパイルレッドを上CSS3ボックスと共有する今日では、3D効果で作られています。DEMOは、CSS3 3D変更技術を使用しての結果はそれを行うにはかなり良好でした。3D効果は異なりますのでご注意くださいtransform-style: preserve-3d、属性をあなたは最近のブラウザまたはIE11で効果を確認するために必要があります。

##フロントエンド・コード

HTMLコード：

<div id="effect-3d-box">
  <div class="area">盘他</div>
  <div class="area">柠檬精</div>
  <div class="area">OMG</div>
  <div class="area">我太难了</div>
  <div class="area">996</div>
  <div class="area">我信你个鬼</div>
</div>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

CSS3コード：

#effect-3d-box {
  position: relative;
  margin: auto;
  margin-top: 80px;
  margin-bottom: 80px;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  animation: rotate 20s linear 0s infinite;
  -webkit-animation: rotate 20s linear 0s infinite;
}

#effect-3d-box > .area {
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  color: white;
}

#effect-3d-box > .area:nth-child(2) {
  transform: translateZ(-100px) rotateX(180deg);
  -webkit-transform: translateZ(-100px) rotateX(180deg);
  -moz-transform: translateZ(-100px) rotateX(180deg);
  -ms-transform: translateZ(-100px) rotateX(180deg);
  -o-transform: translateZ(-100px) rotateX(180deg);
  background-color: #e67e22;
}

#effect-3d-box > .area:nth-child(3) {
  transform: rotateX(-90deg);
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform-origin: 50% 0 0;
  background-color: #f1c40f;
}

#effect-3d-box > .area:nth-child(4) {
  transform: rotateX(90deg) rotateY(180deg);
  -webkit-transform: rotateX(90deg) rotateY(180deg);
  -moz-transform: rotateX(90deg) rotateY(180deg);
  -ms-transform: rotateX(90deg) rotateY(180deg);
  -o-transform: rotateX(90deg) rotateY(180deg);
  transform-origin: 50% 100% 0;
  background-color: #2ecc71;
}

#effect-3d-box > .area:nth-child(5) {
  transform: rotateY(90deg) rotateX(180deg);
  -webkit-transform: rotateY(90deg) rotateX(180deg);
  -moz-transform: rotateY(90deg) rotateX(180deg);
  -ms-transform: rotateY(90deg) rotateX(180deg);
  -o-transform: rotateY(90deg) rotateX(180deg);
  transform-origin: 0 50% 0;
  background-color: #3498db;
}

#effect-3d-box > .area:nth-child(6) {
  transform: rotateY(-90deg) rotateX(180deg);
  -webkit-transform: rotateY(-90deg) rotateX(180deg);
  -moz-transform: rotateY(-90deg) rotateX(180deg);
  -ms-transform: rotateY(-90deg) rotateX(180deg);
  -o-transform: rotateY(-90deg) rotateX(180deg);
  transform-origin: 100% 50% 0;
  background-color: #9b59b6;
}

@keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
  to {
    transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
    -webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
    -moz-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
    -ms-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
    -o-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
}
}
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

##知識抽出

1. あなたはCSS3 3Dレンダリング効果素子を作りたい場合は、要素が追加されなければならないtransform-style: preserve-3dため、互換性の問題に、プロパティ、一部の古いブラウザでは、3D効果をレンダリングする方法はありません。
2. アイデアを作る3Dボックスは、各顔に与えられた、6 DIVオーバーラップをさせることであるtransformが変化します。キーは、私たちがそれぞれの顔の変化の軸をクリアする必要があることを、3Dが属性を対応する軸ですtransform-origin。
3. あなたは、表面の特性のいくつか二つが変換を変換含まれているが表示されますので、いくつかのテキストは、3Dディスプレイの障害の問題後の変更の顔、修正2の必要性に表示されます。
4. 心に留めておくために軸を3D座標：私たちの目と画面の間に2次元線形接続をz軸であるを超えてスクリーン横x軸とy軸は、垂直であり、上記のルール変更は、3Dを行うにははるかに簡単になります忘れないでください！

私はあなたが3D効果より楽しくするために、類推によって学ぶことができると思います。また、この3D効果は2019年には、あなたはそれのいくつかを満たして、いくつかの熱い言葉に要約されていますか？