3D cube photo stairs

I want to make a 3D cube photo stair as i saw in an example but for me it doesn’t work the way the person did their own code …it gives me many errors so i said to try my own way. i deleted and wrote again many times the code but it still doesn’t work . only shows the 2D squares and 2 faces have photos on them,the others are just color.i can’t find the issue and i realy want to understand why and how i can make this work the corect way .Thank you in advance. (my first ever post so if its wrong how i put all the code here …help also )

HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Cube Photo Stairs</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div class="container">
        <div class="row1">
            <div class="item n2"></div>
            <div class="item n1"></div>
            <div class="item n3"></div>
        </div>
        <div class="row2">
            <div class="item n4"></div>
            <div class="item n1"></div>
            <div class="item n3"></div>
            <div class="item n2"></div>
        </div>
        <div class="row3">
            <div class="item n3"></div>
            <div class="item n1"></div>
            <div class="item n4"></div>
        </div>
        <div class="row4">
            <div class="item n2"></div>
            <div class="item n4"></div>
            <div class="item n1"></div>
            <div class="item n3"></div>
        </div>
    </div>
</body>
</html>

Style CSS FILE:

:root{
--face-cube1: #2a2abc;
--face-cube2:#c50d88;
--face-cube3:#b8d610;
--face-cube4:#0abe97;
}
body{
width: 150px;
height: 150px;
background-image: url(https://wallpaper-mania.com/wp-content/uploads/2018/09/High_resolution_wallpaper_background_ID_77700341285.jpg);
place-items: center;
display: grid;
}
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 10px;
}
.item.n1 {
grid-column: 2 / 4;
grid-row: 1 / 4;
}

.item.n2 {
grid-column: 1 / 3;
grid-row: 1 / 3;
}

.item.n3 {
grid-column: 3 / 5;
grid-row: 1 / 4;
}

.item.n4 {
  grid-column: 1 / 3;
  grid-row: 3 / 5;
}

/* adjust margin for odd rows */
.row1, .row3 {
  margin-left: 60px;
}

.row1, .row2, .row3, .row4 {
  display: flex;
  align-items: flex-start;
  perspective: 18000px;
}

.item{
position: relative;
transform: rotateX('90deg') rotateY('-50deg') rotateZ('90deg');
transform-origin: 50px;
transform-style:preserve-3d;
box-sizing: border-box;
width: 80px;
height: 80px;
margin: 15px 30px;
transition: transform 400ms cubic-bezier(0.19, 1, 0.22, 1);
background-size: cover;
background-position: center;
}
:hover{
transform: translate(-3px) rotateY('0') rotateX('60deg') rotateZ('-45deg');
}
.item::before,::after{
  position: absolute;
  width: 80px;
  height: 80px;
  transform-style: preserve-3d;
  box-sizing: border-box;
  background-color: blueviolet;
  background-size: inherit;
  background-position: inherit;
}
::before{
  top: -50%;
  left: 0;
  content: "";
  transform: rotateY('-90deg') rotateZ('90deg') translate3d(0.37 * 80px, 0.40 * 80px, 0.42 * 80px);
}
::after{
top: 50%;
left: 0;
content: "";
transform: rotateX('-90deg') translate3d(3px,0.40 * 80px, 0);
}
.n1{
background-image:url(https://wallpaperaccess.com/full/1413983.jpg);
}
.n1::after{
background-color: var(--face-cube2);
}
.n2{
background-color: var(--face-cube4);
}
.n2::before{
background-image: url(https://gardentherapy.ca/wp-content/uploads/2021/03/lilac-flower-clusters.jpg);
}
.n3{
background-image: url(https://www.flowermeaning.com/flower-pics/Lilac-Meaning.jpg);
}
.n3::before{
background-color: var(--face-cube1);
}
.n3::after{
background-color: var(--face-cube3);
}
.n4{
background-color: var(--face-cube2);
}
.n4::after{
background-color: var(--face-cube4);
}
.n4::before{
background-image: url(https://i.pinimg.com/originals/39/a0/7c/39a07c47af85e33736a7791ff832ab5c.jpg);
}
.item,::after,::before{
border-radius: 10px;
}

i wrote in VS code …can that have a link?

CodePen cube challenge.
https://codepen.io/challenges/2023/february/2
saved some examples and trying do to my own but the cube stairs one caught my interest and wanted to try .Im not sure if since its not freecodecamp ,i can get help …but here its the only place i know for some feedback.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.