I'm venturing into the web universe and I'd like to make an animation of a rotating cube, containing an image on each face. However, I can't make all faces appear in the view. The big problem always seems to be on the front or back. For some reason, they don't appear together. I've already reviewed and tried other solutions, but so far nothing. Furthermore, there is some element behind the cube that keeps appearing too.
Here is my code:
body,
html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
perspective: 1000px;
}
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: rotate 10s infinite linear;
}
.cube__face {
width: 200px;
height: 200px;
position: absolute;
backface-visibility: hidden;
}
.cube__face img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cube__face--front {
transform: translateZ(100px);
}
.cube__face--back {
transform: rotateY(180deg) translateZ(-100px);
}
.cube__face--right {
transform: rotateY(90deg) translateZ(100px);
}
.cube__face--left {
transform: rotateY(-90deg) translateZ(100px);
}
.cube__face--top {
transform: rotateX(90deg) translateZ(100px);
}
.cube__face--bottom {
transform: rotateX(-90deg) translateZ(100px);
}
@keyframes rotate {
from {
transform: rotateY(0deg) rotateX(0deg);
}
to {
transform: rotateY(360deg) rotateX(360deg);
}
}
/* Opcional: estilos adicionais */
body {
background-color: #f5f5f5;
}
.container {
margin: 20px;
border: 1px solid #ddd;
}
.cube__face {
border: 1px solid #ccc;
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cubo Giratório com Animação</title>
<link rel="stylesheet" href="rotate.css">
</head>
<body>
<div class="container">
<div class="cube">
<div class="cube__face cube__face--front">
<img src="https://upload.wikimedia.org/wikipedia/en/f/f0/My_Beautiful_Dark_Twisted_Fantasy.jpg?20121001043838" alt="Álbum 1">
</div>
<div class="cube__face cube__face--back">
<img src="https://upload.wikimedia.org/wikipedia/en/7/70/Graduation_%28album%29.jpg?20170208193846" alt="Álbum 2">
</div>
<div class="cube__face cube__face--right">
<img src="https://upload.wikimedia.org/wikipedia/en/f/f4/Late_registration_cd_cover.jpg?20240110000430" alt="Álbum 3">
</div>
<div class="cube__face cube__face--left">
<img src="https://upload.wikimedia.org/wikipedia/en/a/a3/Kanyewest_collegedropout.jpg?20210524152751" alt="Álbum 4">
</div>
<div class="cube__face cube__face--top">
<img src="https://upload.wikimedia.org/wikipedia/en/0/03/Yeezus_album_cover.png?20150701205042" alt="Álbum 5">
</div>
<div class="cube__face cube__face--bottom">
<img src="https://upload.wikimedia.org/wikipedia/en/4/4d/The_life_of_pablo_alternate.jpg?20170721000912" alt="Álbum 6">
</div>
</div>
</div>
</body>
</html>Main problem appears to be the translateZ(-100px) in the back face transform. be aware that transforms are applied in reverse order, so what happened here is you pushed the face backwards and then rotated it around the origin into the front face.
I also changed the rotation keyframes so the back face actually becomes visible at some point.
body,
html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
perspective: 1000px;
}
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: rotate 10s infinite linear;
}
.cube__face {
width: 200px;
height: 200px;
position: absolute;
backface-visibility: hidden;
}
.cube__face img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cube__face--front {
transform: translateZ(100px);
}
.cube__face--back {
transform: rotateY(180deg) translateZ(100px);
}
.cube__face--right {
transform: rotateY(90deg) translateZ(100px);
}
.cube__face--left {
transform: rotateY(-90deg) translateZ(100px);
}
.cube__face--top {
transform: rotateX(90deg) translateZ(100px);
}
.cube__face--bottom {
transform: rotateX(-90deg) translateZ(100px);
}
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
25% {
transform: rotateX(-45deg) rotateY(90deg);
}
50% {
transform: rotateX(0) rotateY(180deg);
}
75% {
transform: rotateX(45deg) rotateY(270deg);
}
100% {
transform: rotateX(0) rotateY(360deg);
}
}
/* Opcional: estilos adicionais */
body {
background-color: #f5f5f5;
}
.container {
margin: 20px;
border: 1px solid #ddd;
}
.cube__face {
border: 1px solid #ccc;
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cubo Giratório com Animação</title>
<link rel="stylesheet" href="rotate.css">
</head>
<body>
<div class="container">
<div class="cube">
<div class="cube__face cube__face--front">
<img src="https://upload.wikimedia.org/wikipedia/en/f/f0/My_Beautiful_Dark_Twisted_Fantasy.jpg?20121001043838" alt="Álbum 1">
</div>
<div class="cube__face cube__face--back">
<img src="https://upload.wikimedia.org/wikipedia/en/7/70/Graduation_%28album%29.jpg?20170208193846" alt="Álbum 2">
</div>
<div class="cube__face cube__face--right">
<img src="https://upload.wikimedia.org/wikipedia/en/f/f4/Late_registration_cd_cover.jpg?20240110000430" alt="Álbum 3">
</div>
<div class="cube__face cube__face--left">
<img src="https://upload.wikimedia.org/wikipedia/en/a/a3/Kanyewest_collegedropout.jpg?20210524152751" alt="Álbum 4">
</div>
<div class="cube__face cube__face--top">
<img src="https://upload.wikimedia.org/wikipedia/en/0/03/Yeezus_album_cover.png?20150701205042" alt="Álbum 5">
</div>
<div class="cube__face cube__face--bottom">
<img src="https://upload.wikimedia.org/wikipedia/en/4/4d/The_life_of_pablo_alternate.jpg?20170721000912" alt="Álbum 6">
</div>
</div>
</div>
</body>
</html>