الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكود
<!DOCTYPE html> <html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 10px; } h2, p { margin-bottom: 10px; } .cube { margin: 50px 0 -50px 50px; width: 200px; height: 200px; perspective: 500px; perspective-origin: 150% 100%; /* ستظهر الألوان بشكل أفضل preserve-3d إذا قمت بتغيير القيمة إلى */ transform-style: flat; } .face { position: absolute; width: 100px; height: 100px; line-height: 100px; font-family: Arial; font-size: 50px; text-align: center; color: white; } .front { background: rgba(0, 0, 0, 0.3); transform: translateZ(50px); } .back { background: rgba(0, 255, 0, 1); transform: rotateY(180deg) translateZ(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotateY(90deg) translateZ(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotateY(-90deg) translateZ(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotateX(90deg) translateZ(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotateX(-90deg) translateZ(50px); } </style> </head> <body> <h2>CSS 3D Cube</h2> <p>The following cube contain 6 faces.</p> <p>Each face is a div transformed to take its place correctly.</p> <div class="cube"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </body> </html>