CUBE

1,228 THEOPHANE

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 September 2025

Jeu de cube 3D HTML avec statistiques et personnalisation

20 February 2026

Chargeur de cubes d'images 3D

HTML

CSS

*{
margin: 0;
padding: 0;
box-sizing: border-box;

}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #050505;
}
.cube{
position: relative;
width: 300px;
height:300px;
transform-style: preserve-3d;

animation: animate 4s linear infinite;
}
@keyframes animate
 {
    0%
    {
        transform: rotateX(-30deg)rotateY(0deg);  
    }
    100%
    {
        transform: rotateX(-30deg)rotateY(360deg); 
    }
}
.cube div{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}
.cube div span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:linear-gradient(#151515,#00ec00);
    transform: rotateY(calc(90deg *var(--i)))translateZ(150px);
}
.top{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background: #222;
    transform: rotateX(90deg) translateZ(150px);
}
.top::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: #0f0;
transform: translateZ(-380px);
filter: blur(20px);
box-shadow: 0 0 120px rgba(0,255,0,0.2),
0 0 200px rgba(0,255,0,0.4),
0 0 300px rgba(0,255,0,0.6),
0 0 400px rgba(0,255,0,0.8),
0 0 500px rgba(0,255,0,1);

}