Run ❯
×
Change Orientation
Change Theme, Dark/Light
<!DOCTYPE html> <html> <head> <style> .ex1 { perspective: 800px; } .ex2 { perspective: 150px; } .cube { font-size: 4em; width: 2em; margin: 1.5em auto; transform-style: preserve-3d; transform: rotateX(-45deg) rotateY(30deg); } .side { position: absolute; width: 2em; height: 2em; background: rgba(100,100,100,0.5); border: 1px solid red; text-align: center; line-height: 2em; } .front {transform: translateZ(1em);} .top {transform: rotateX(90deg) translateZ(1em);} .right {transform: rotateY(90deg) translateZ(1em);} .left {transform: rotateY(-90deg) translateZ(1em);} .bottom {transform: rotateX(-90deg) translateZ(1em);} .back {transform: rotateY(-180deg) translateZ(1em);} </style> </head> <body> <h1>The perspective Property</h1> <h2>perspective: 800px:</h2> <div class="ex1"> <div class="cube"> <div class="side front">1</div> <div class="side back">6</div> <div class="side right">4</div> <div class="side left">3</div> <div class="side top">5</div> <div class="side bottom">2</div> </div> </div> <h2 style="margin-top:300px">perspective: 150px:</h2> <div class="ex2"> <div class="cube"> <div class="side front">1</div> <div class="side back">6</div> <div class="side right">4</div> <div class="side left">3</div> <div class="side top">5</div> <div class="side bottom">2</div> </div> </div> </body> </html>