Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <style> .cube1 { font-size: 4em; width: 2em; margin: 1.5em auto; transform-style: preserve-3d; transform: perspective(5cm) rotateX(-15deg) rotateY(30deg); } .cube2 { font-size: 4em; width: 2em; margin: 1.5em auto; transform-style: preserve-3d; transform: perspective(10cm) rotateX(-15deg) rotateY(30deg); } .cube3 { font-size: 4em; width: 2em; margin: 1.5em auto; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(30deg); } .side { position: absolute; width: 2em; height: 2em; background: rgba(100,100,100,0.3); 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() Function</h1> <h2>perspective(5cm):</h2> <div class="cube1"> <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> <h2 style="margin-top:300px">perspective(10cm):</h2> <div class="cube2"> <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> <h2 style="margin-top:300px">No perspective:</h2> <div class="cube3"> <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> </body> </html>
