مبدل رایگان
مکعب سه بعدی CSS ژنراتور
انیمیشن های مکعبی سه بعدی CSS با رنگ ها، اندازه ها و جلوه های سفارشی ایجاد کنید. کدهای HTML و CSS تولید شده را فورا کپی کنید.
ضخامت: 0px
پیش نمایش
کد تولید شده
<!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>ابزارهای مرتبط
مشاهده همه ابزارهاCSS Flexbox Layout Generator
به صورت بصری طرح‌بندی‌های CSS Flexbox را با پیش‌نمایش زنده ایجاد کنید. جهت انعطاف‌پذیری، محتوای توجیهی، تراز کردن آیتم‌ها و موارد دیگر - رایگان و سمت مشتری را تنظیم کنید.
شبکه CSS Layout Generator
به صورت بصری طرح بندی های CSS Grid را با پیش نمایش زنده ایجاد کنید. ستون‌های قالب شبکه، ردیف‌ها، شکاف، موارد توجیه‌کننده، تراز کردن آیتم‌ها و موارد دیگر - رایگان و سمت کلاینت را تنظیم کنید.
گرادیان CSS ژنراتور
به صورت بصری شیب های CSS را با پیش نمایش زنده ایجاد کنید. شیب های خطی، شعاعی و مخروطی را با توقف های رنگی سفارشی ایجاد کنید - رایگان و سمت مشتری.
Glassmorphism CSS ژنراتور
با پیش‌نمایش بی‌درنگ، جلوه‌های کارت شیشه‌مورفیسم خیره‌کننده ایجاد کنید. تاری، کدورت و رنگ‌ها را فوراً سفارشی کنید.