I am just starting out as a beginner. I have been practicing writing HTML and SCSS by following the code provided by my teacher. I carefully added each sentence one by one, checking to see if the new codes had the effect he suggested. Here is what I accomplished with HTML and SCSS:
HTML
<div class="banner">
<div class="panel"></div>
...
</div>
SCSS
body {
background-color: #000;
color: #fff;
min-height: 100vh;
display: grid;
place-items: center;
}
.banner {
display: flex;
}
$width: 23px;
.panel {
position: relative;
width: $width;
height: 110px;
overflow: hidden;
animation: rotate 6s infinite ease-in-out;
}
@keyframes rotate {
from { transform: rotateX(0deg); }
...
}
...
Later on, my teacher added:
perspective: 500px;
to the body in SCSS, like this:
place-items: center;
perspective: 500px;
Immediately upon making this change, the image on his screen changed, but nothing happened on mine. I am using a Windows 10 computer and I have tried viewing "index.html" on Google Chrome, Microsoft Edge, Mozilla Firefox, all without success.
I really want to complete this 3D animation by myself. Please assist me in figuring this out.