Task 2714 - perspective not working - Coderslang: Стань Программистом

Этот сайт лучше всего просматривать в современном браузере с включённым JavaScript.

Task 2714 - perspective not working

NG2022

Stage 2.
В браузере не отображается perspective, если применять ее к .cube (как требуется в задании) или .side.
perspective видна в браузере только если поставить ее первым св-вом в каждом из 6-ти элементов, соответсвующих сторонам куба.
Как заставить perspective работать?

<html>
  <head>
    <title>3D Cube</title>
    <style>
      body {
        font-family: monospace;
        display: grid;
        place-items: center;
        height: 100vh;
      }
      .cube {
        width: 150px;
        height: 150px;
        position: relative;
        transform: perspective(400px);
      }
      .side {
        position: absolute;
        width: 150px;
        height: 150px;
        display: grid;
        place-items: center;
        font-size: 18px;
        border: 1px solid red;
      }
      .front {
        background-color: rgb(117, 244, 244, 0.2);
      }
      .back {
        background-color: rgb(144, 224, 243);
      }
      .left {
        background-color: rgb(184, 179, 233);
      }
      .right {
        background-color: rgb(217, 153, 185);
      }
      .top {
        background-color: rgb(209, 123, 136);
      }
      .bottom {
        background-color: rgb(219, 208, 83);
      }
      .side.back {
        transform: rotateY(180deg) translateZ(75px);
      }
      .side.right {
        transform: rotateY(90deg) translateZ(75px);
      }
      .side.left {
        transform: rotateY(-90deg) translateZ(75px);
      }
      .side.top {
        transform: rotateX(90deg) translateZ(75px);
      }
      .side.bottom {
        transform: rotateX(-90deg) translateZ(75px);
      }
      .side.front {
        transform: translateZ(75px);
      }
    </style>
  </head>
  <body>
    <div class="cube">
      <div class="side back">Back</div>
      <div class="side left">Left</div>
      <div class="side right">Right</div>
      <div class="side top">Top</div>
      <div class="side bottom">Bottom</div>
      <div class="side front">Front</div>
    </div>
  </body>
</html>

Рез-т тестов

amati

Рекомендую внимательно пройтись по соответствующей лекции. Обратите внимание на блок Начало перспективы (The beginning of the perspective) и то, как там указывается перспектива дочерних элементов через родительский.

NG2022

Спасибо за подсказку. Данный этап прошла - в браузере было похоже на куб..
Но вот незадача. На Stage 2 тест показал, что задание выполнено, но в браузере НЕТ КУБА!!!!
Что не так? Как его отобразить?
'''
<html>
<head>
<title>3D Cube</title>
<style>
body {
font-family: monospace;
display: grid;
place-items: center;
height: 100vh;
}
.cube {
width: 150px;
height: 150px;
position: relative;
perspective: 400px;
transform-style: preserve-3d;
transform: rotateX(-5deg);
}
.side {
position: absolute;
width: 150px;
height: 150px;
display: grid;
place-items: center;
font-size: 18px;
border: 1px solid red;
}
.front {
background-color: rgb(117, 244, 244);
}
.back {
background-color: rgb(144, 224, 243);
}
.left {
background-color: rgb(184, 179, 233);
}
.right {
background-color: rgb(217, 153, 185);
}
.top {
background-color: rgb(209, 123, 136);
}
.bottom {
background-color: rgb(219, 208, 83);
}
.side.back {
transform: rotateY(180deg) translateZ(75px);
}
.side.right {
transform: rotateY(90deg) translateZ(75px);
}
.side.left {
transform: rotateY(-90deg) translateZ(75px);
}
.side.top {
transform: rotateX(90deg) translateZ(75px);
}
.side.bottom {
transform: rotateX(-90deg) translateZ(75px);
}
.side.front {
transform: translateZ(75px);
}
</style>
</head>
<body>
<div class="cube">
<div class="side front">Front</div>
<div class="side back">Back</div>
<div class="side left">Left</div>
<div class="side right">Right</div>
<div class="side top">Top</div>
<div class="side bottom">Bottom</div>
</div>
</body>
</html>
'''
Рез-т в браузере(Chrome):

amati

хмммм, должен быть stage3 - он у вас был?

NG2022

Да, был. Он же все и испортил. До этого момента хоть как-то на куб было похоже.

amati

NG2022 исправил начальный файл - ошибка в стилях:

      .front {
         background-color:  rgba(117, 244, 244, 0.5);
      }
      .back {
          background-color: rgba(144, 224, 243, 0.5);
      }
      .left {
          background-color: rgba(184, 179, 233, 0.5);
      }
      .right {
          background-color: rgba(217, 153, 185, 0.5);
      }
      .top {
          background-color: rgba(209, 123, 136, 0.5);
      }
      .bottom {
          background-color: rgba(219, 208, 83, 0.5);
      }

цвета сторон должны быть с прозрачнотью