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;
}
