3D CSS Cube Generator
Bumuo ng 3D CSS cube animation na may mga custom na kulay, laki, at effect. Kopyahin kaagad ang nabuong HTML at CSS code.
<!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>Mga Kaugnay na Tools
Tingnan ang lahat ng toolsCSS Flexbox Tagabuo ng Layout
Biswal na bumuo ng mga layout ng CSS Flexbox na may live na preview. Isaayos ang flex-direction, justify-content, align-item, at higit pa — libre at client-side.
CSS Grid Tagabuo ng Layout
Biswal na bumuo ng mga layout ng CSS Grid na may live na preview. Isaayos ang grid-template-column, row, gap, justify-item, align-item, at higit pa — libre at client-side.
CSS Gradient Generator
Biswal na bumuo ng mga gradient ng CSS gamit ang live na preview. Gumawa ng mga linear, radial, at conic na gradient na may custom na color stops — libre at client-side.
Glassmorphism CSS Generator
Gumawa ng nakamamanghang glassmorphism card effect gamit ang real-time na preview. I-customize kaagad ang blur, opacity, at mga kulay.