Производство чистого CSS3 коробка 3d сети красного горячие слова

Сегодня на долю с CSS3 коробки производится с 3D - эффектом, выше простой красный скомпилирован сеть горячих слов 2019. Методы 3d изменений DEMO использует CSS3, результаты были довольно хорошо , чтобы сделать это. Обратите внимание , что 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 ДИВУ перекрытию, затем было передано каждой грань transformизменения. Ключ в том , что нам нужно очистить ось каждого изменение лица, 3D оси , соответствующий атрибут transform-origin.
3. Какой-то текст будет отображаться в условиях изменений после проблем 3D-дисплея расстройства, необходимость в поправку 2, так что вы увидите некоторые из свойств поверхности содержит два преобразование преобразования.
4. 3D оси координат, чтобы иметь в виде: экран боковая ось х и у-ось вертикальные, за 2-мерную линейную связь между нашими глазами и экраном является осью г, помните вышеуказанные изменения правил будут намного проще сделать 3D!

Я надеюсь, что вы можете узнать по аналогии, чтобы сделать более забавные 3D-эффекты. Кроме того, этот эффект 3D суммированы в несколько горячих слов 2019, вы встречались некоторые из них?