CSS перспектива не работает

Question

Я пытаюсь создать куб с помощью CSS.Я действительно думаю, что это уже там, но я не могу видеть это.Не стесняйтесь редактировать скрипку .

Я не понимаю, почему перспектива не работает.Это лучшая практика?

Можно ли вращать куб целиком ??

Источник: 24ways .

HTML:

<section class="container">
      <div id="cube">
        <figure class="front">1</figure>
        <figure class="back">2</figure>
        <figure class="right">3</figure>
        <figure class="left">4</figure>
        <figure class="top">5</figure>
        <figure class="bottom">6</figure>
      </div>
    </section>

CSS:

.container {
  margin: 200px auto;
  width: 200px;
  height: 200px;
  position: relative;
  -webkit-perspective: 800px;
 }

 #cube {
  width: 100%;
  height: 100%;
  position: absolute;
 -webkit-transform-style: preserve-3d;
 }

#cube figure {
  width: 198px;
  height: 198px;
  display: block;
  position: absolute;
  border: 1px solid #ddd;
  background-color: rgba(0,0,0,0.2);
}

#cube .front { -webkit-transform: rotateY(0deg) translateZ(100px); }
#cube .back { -webkit-transform: rotateX(180deg) translateZ(100px); }
#cube .right { -webkit-transform: rotateY(90deg) translateZ(100px); }
#cube .left { -webkit-transform: rotateY(-90deg) translateZ(100px); }
#cube .top { -webkit-transform: rotateX(90deg) translateZ(100px); }
#cube .bottom { -webkit-transform: rotateX(-90deg) translateZ(100px); }    

Answer 1

Проблема может заключаться в том, что аппаратное ускорение не поддерживалось на вашем ПК, и оно было на вашем компьютере Mac ... преобразования css3d, такие как rotateX и rotateY, требуют аппаратного ускорения.

в chrome goв адресную строку и введите

chrome: // gpu

, вы увидите

3D CSS: недоступно.Аппаратное ускорение отключено.

если это так, то 3d куб не виден.

Answer 2

Посмотрите на http://css3.bradshawenterprises.com/transforms/#transDemo3.

У меня есть обертка вокруг куба, который я вращаю - в этом случае, для простоты, я на самом деле использую три деления, один для X, один для Y и одиндля Z.

Детская площадка внизу должна показать вам, как работает перспектива и т. д.

Answer 3

Некоторое время назад я работал с большим количеством 3D-трансформаций, но недавно заметил, что перспектива CSS3 не влияет на мои веб-браузеры, включая Chrome. Попробовал следующее, и это помогло в Google Chrome:

1. Перейдите к «chrome: // flags»
2. Найдите элемент с надписью «Переопределить список рендеринга программного обеспечения» и отключите его
3. Перезапустите ваш браузер

Я знаю, что уже немного поздно, но на всякий случай это может вам помочь ...