I have created a 3d photo cube according to instructions from a code school class. There seems to be an error in the instructions. I have fixed the error by adding one line of code, but I am trying to understand why that line of code is necessary.
Here is the code (I put it in a CodePen):
.stage { width: 200px; height: 200px; perspective: 600px; perspective-origin: 50% 0; margin-left: auto; margin-right: auto; } .cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: rotate 10s infinite linear; } .side { position: absolute; width: 200px; height: 200px; top: 0; left: 0; background-color: red; /* THE LINE IN QUESTION */ text-align: center; } .front { transform: translateZ(100px); } .back { transform: rotateY(180deg) translateZ(100px); } .left { transform: rotateY(-90deg) translateZ(100px); } .right { transform: rotateY(90deg) translateZ(100px); } .top { transform: rotateX(90deg) translateZ(100px); } .bottom { transform: rotateX(-90deg) translateZ(100px); } @keyframes rotate { 0% { transform: rotateY(0deg); } 5% { transform: rotateY(90deg); } 25% { transform: rotateY(90deg); } 30% { transform: rotateY(180deg); } 50% { transform: rotateY(180deg); } 55% { transform: rotateY(270deg); } 75% { transform: rotateY(270deg); } 80% { transform: rotateY(360deg); } 100% { transform: rotateY(360deg); } }<div class="photobox"> <div class="stage"> <div class="cube"> <img class="side front" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"> <img class="side back" src="https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?ixlib=rb-1.2.1&auto=format&fit=crop&w=702&q=80"> <img class="side left" src="https://images.unsplash.com/photo-1441786485319-5e0f0c092803?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"> <img class="side right" src="https://images.unsplash.com/photo-1510274332963-71d4e866fccf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"> </div> </div> </div>In the .side class CSS, the instructions from the code school didn't include the background-color property. This creates a distortion. When the front image of the cube is facing front, the picture appears as it should. When the back image is facing front, it is covered by the front image, which is now on the back side of the cube. You can tell from the perspective that the front image is in back of the cube, but it is still superimposed on what is now in the front view. The same thing happens with the left and right images. I don't think I'm explaining it very well, so here is the CodePen so you can see what I'm talking about. https://codepen.io/dtarvin/pen/mdeGqXV You'll see that if the background-color property is commented out, you get the distortion, but if it's not, the cube works as it should.
So why is a background-color necessary for the image cube to display properly when I have an image filling each side? Why do two of the sides appear properly but two others don't when I don't use a background-color?
By the way, the instructions were put together by a teacher who is no longer at the code school, so I can't ask him what is going on.
Thanks!
<img>.<img>tag does not use and does not need a closing slash and never has in HTML.