|
La création d'un widget de cube rotatif CSS implique l'utilisation de transformations 3D et d'images clés d'animation. Voici un guide étape par étape :
Marquage HTML :
```html
```
CSS :
```css
/* Conteneur de cubes */
.cube-conteneur {
largeur :150 px ;
hauteur :150px;
marge :0 automatique;
}
/*Cube */
.cube {
largeur :100 %;
hauteur :100 %;
style de transformation :préserver-3d ;
animation :rotateCube 10s linéaire infini ;
}
/* Visages de cubes */
.affronter {
largeur :100 %;
hauteur :100 %;
position :absolue;
}
/* Face avant */
.devant {
transformer :traduireZ(50px);
couleur d'arrière-plan :#ff0000 ;
}
/* Face arrière */
.dos {
transformation :rotationY(180deg) translationZ(50px);
couleur d'arrière-plan :#00ff00 ;
}
/* Face gauche */
.gauche {
transformation :rotationY(-90deg) translationZ(50px);
couleur d'arrière-plan :#0000ff ;
}
/* Visage droit */
.droite {
transformation :rotationY(90deg) translationZ(50px);
couleur d'arrière-plan :#ffff00 ;
}
/* Face supérieure */
.haut {
transformation :rotationX(90deg) translationZ(50px);
couleur d'arrière-plan :#ff00ff ;
}
/* Face inférieure */
.bas {
transformation :rotationX(-90deg) translationZ(50px);
couleur d'arrière-plan :#00ffff ;
}
/* Animation de rotation des cubes */
@keyframes rotationCube {
0% {
transformation :rotationY(0deg) rotationX(0deg);
}
50% {
transformation :rotationY(180deg) rotationX(0deg);
}
100 % {
transformation :rotationY(360deg) rotationX(0deg);
}
}
```
Ce code crée un widget cube rotatif à six faces. Le cube tourne à l'infini autour de l'axe Y (horizontalement). Vous pouvez ajuster la vitesse et la direction de rotation en modifiant les images clés de l'animation « rotateCube ».
|
