3D CSS کیوب جنریٹر
حسب ضرورت رنگوں، سائزوں اور اثرات کے ساتھ 3D CSS کیوب اینیمیشن بنائیں۔ تیار کردہ HTML اور CSS کوڈ کو فوری طور پر کاپی کریں۔
<!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 گریڈینٹ جنریٹر
لائیو پیش نظارہ کے ساتھ بصری طور پر CSS گریڈینٹ تیار کریں۔ اپنی مرضی کے مطابق رنگ کے اسٹاپس کے ساتھ لکیری، ریڈیل، اور کونک گریڈینٹ بنائیں — مفت اور کلائنٹ سائیڈ۔
Glassmorphism CSS جنریٹر
ریئل ٹائم پیش نظارہ کے ساتھ شاندار گلاسمورفزم کارڈ اثرات بنائیں۔ دھندلاپن، دھندلاپن اور رنگوں کو فوری طور پر حسب ضرورت بنائیں۔