3D CSS kubu Generator
Fərdi rənglər, ölçülər və effektlərlə 3D CSS kub animasiyaları yaradın. Yaradılmış HTML və CSS kodunu dərhal kopyalayın.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D CSS Cube</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background: #1a1a2e;
}
@keyframes cubeRotateY {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(0deg) rotateY(360deg); }
}
/* Cube Scene */
.cube-scene {
perspective: 800px;
width: 120px;
height: 120px;
}
/* Cube */
.cube {
width: 120px;
height: 120px;
position: relative;
transform-style: preserve-3d;
animation: cubeRotateY 4s linear infinite;
}
/* All Faces */
.cube-face {
position: absolute;
width: 120px;
height: 120px;
opacity: 1;
backface-visibility: visible;
}
/* Individual Faces */
.cube-face--front { background: #ff6b6b; transform: translateZ(60px); }
.cube-face--back { background: #4ecdc4; transform: rotateY(180deg) translateZ(60px); }
.cube-face--left { background: #45b7d1; transform: rotateY(-90deg) translateZ(60px); }
.cube-face--right { background: #f9ca24; transform: rotateY(90deg) translateZ(60px); }
.cube-face--top { background: #6c5ce7; transform: rotateX(90deg) translateZ(60px); }
.cube-face--bottom { background: #a8e6cf; transform: rotateX(-90deg) translateZ(60px); }
</style>
</head>
<body>
<div class="cube-scene">
<div class="cube">
<div class="cube-face cube-face--front"></div>
<div class="cube-face cube-face--back"></div>
<div class="cube-face cube-face--left"></div>
<div class="cube-face cube-face--right"></div>
<div class="cube-face cube-face--top"></div>
<div class="cube-face cube-face--bottom"></div>
</div>
</div>
</body>
</html>Əlaqədar Alətlər
Bütün alətlərə baxınCSS Flexbox Layout Generator
Canlı önizləmə ilə CSS Flexbox planlarını vizual olaraq yaradın. Sərbəst və müştəri tərəfində çevik istiqaməti tənzimləyin, məzmunu əsaslandırın, elementləri hizalayın və s.
CSS Grid Layout Generator
Canlı önizləmə ilə vizual olaraq CSS Grid planlarını yaradın. Şəbəkə-şablon-sütunları, sətirləri, boşluqları, əsaslandırmanı, elementləri hizalayın və daha çoxunu tənzimləyin - pulsuz və müştəri tərəfi.
CSS Gradient Generator
Canlı önizləmə ilə vizual olaraq CSS gradientləri yaradın. Fərdi rəng dayanacaqları ilə xətti, radial və konik gradientlər yaradın - pulsuz və müştəri tərəfi.
Glassmorphism CSS Generator
Real vaxtda önizləmə ilə heyrətamiz şüşə morfizm kartı effektləri yaradın. Bulanıqlığı, qeyri-şəffaflığı və rəngləri dərhal fərdiləşdirin.