3D CSS Küpü jeneratör
Özel renkler, boyutlar ve efektlerle 3D CSS küp animasyonları oluşturun. Oluşturulan HTML ve CSS kodunu anında 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>İlgili Araçlar
Tüm araçları görüntüleCSS Esnek Kutusu Düzen Oluşturucu
Canlı önizlemeyle görsel olarak CSS Flexbox düzenleri oluşturun. Esnek yönü, içeriği iki yana yaslamayı, öğeleri hizalamayı ve daha fazlasını ücretsiz ve istemci tarafında ayarlayın.
CSS Izgarası Düzen Oluşturucu
Canlı önizlemeyle görsel olarak CSS Izgara düzenleri oluşturun. Izgara şablonu sütunlarını, satırları, boşluğu, iki yana yaslama öğelerini, öğeleri hizalamayı ve daha fazlasını ücretsiz ve istemci tarafında ayarlayın.
CSS Gradyanı jeneratör
Canlı önizlemeyle görsel olarak CSS degradeleri oluşturun. Özel renk duraklarıyla, ücretsiz ve istemci tarafında doğrusal, radyal ve konik degradeler oluşturun.
Cammorfizm CSS jeneratör
Gerçek zamanlı önizlemeyle çarpıcı cammorfizm kartı efektleri oluşturun. Bulanıklığı, opaklığı ve renkleri anında özelleştirin.