Построим полноценный 3D куб.
Не изменяй уже добавленные стили, все новые стили добавляй только к уже существующим классам.
Первым делом повернем на нужный угол все необходимые стороны.
Сторона с классом back должна быть развернута на 180 градусов вокруг оси Y.
Левая и правая (.left и .right) стороны должны быть развернуты на 90 градусов, каждая в своем направлении.
Верхняя и нижняя (.top и .bottom) стороны должны быть тоже развернуты в нужном направлении уже вокруг оси X.
Переднюю сторону (.front) нет смысла вращать
Эта задача — часть курса по Full-Stack JavaScript.
Ты можешь задать свой вопрос в комментариях под постом.
Если ты уже решил задачу, то не стесняйся помочь другим.
index.html
<!DOCTYPE>
<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;
}
.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);
}
</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>