الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكود
<!DOCTYPE html> <html> <head> <style> .cube { margin: 50px 0 -50px 50px; width: 200px; height: 200px; perspective: 500px; transform-style: preserve-3d; } .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); } .perspective-150-100 { perspective-origin: 150% 100%; } .perspective-200-100 { perspective-origin: 200% 100%; } .perspective-200-150 { perspective-origin: 200% 150%; } </style> </head> <body> <h2>CSS perspective-origin Property</h2> <p>This property determines the position at which the viewer is looking.</p> <p>perspective-origin: center center (default)</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> <p>perspective-origin: 150% 100%</p> <div class="cube perspective-150-100"> <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> <p>perspective-origin: 200% 100%</p> <div class="cube perspective-200-100"> <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> <p>perspective-origin: 200% 150%</p> <div class="cube perspective-200-150"> <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>