El cubo 3D Rotating Image Previewer es un efecto en el que aparece un conjunto de imágenes en las caras de un cubo 3D giratorio. Este efecto se puede crear usando HTML y CSS.
Enfoque : la mejor manera de animar objetos HTML es usando CSS @keyframes y configurando el estado de transición en diferentes estados de animación.
Código HTML:
- Cree un archivo HTML (index.html).
- Vincula el archivo CSS en HTML que proporciona todo el efecto de la animación a nuestro HTML. Se coloca dentro de la etiqueta <head>.
- Cree 6 etiquetas <div> para cada cara del cubo y coloque sus imágenes en cada cara.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="cube"> <!-- Creating 6 divs for each face of the cube --> <div class="box box1"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210223233400/gfg4.jpg" alt="image 1"> </div> <div class="box box2"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210223232947/gfg2.jpg" alt="image 2"> </div> <div class="box box3"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210223233400/gfg4.jpg" alt="image 3"> </div> <div class="box box4"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210223232947/gfg2.jpg" alt="image 4"> </div> <div class="box box5"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210223233046/gfg3.png" alt="image 5"> </div> <div class="box box6"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210223232853/gfg1.png" alt="image 6"> </div> </div> </body> </html>
Código CSS : El siguiente es el contenido del archivo ‘style.css’ utilizado en el código HTML anterior. CSS se utiliza para dar diferentes tipos de animaciones y efectos a nuestra página HTML para que parezca interactiva para todos los usuarios.
- Cree una clase de cuerpo para dar un estilo general a toda la página.
- Cree identificadores y clases para cada cara del cubo para proporcionar estilo.
- Utilice @keyframes para animar los elementos HTML.
CSS
/* CSS for general styling */
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background: #1e6f0a;
}
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: rotate 10s linear infinite;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.9;
}
/* Applying styles to each face */
.box1 {
transform: translateZ(100px);
}
.box2 {
transform: rotateY(90deg) translateX(100px);
transform-origin: right;
}
.box3 {
transform: rotateY(180deg) translateZ(100px);
}
.box4 {
transform: rotateY(-90deg) translateX(-100px);
transform-origin: left;
}
.box5 {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top;
}
.box6 {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom;
}
/* Animating the elements */
@keyframes rotate {
0%,
100% {
transform: rotate(0deg);
}
20% {
transform: rotateY(90deg) rotateZ(90deg);
}
40% {
transform: rotateY(180deg) rotateZ(-90deg);
}
60% {
transform: rotateY(270deg) rotateZ(90deg);
}
80% {
transform: rotateY(360deg) rotateZ(-90deg);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por mehulp1612 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA