<!DOCTYPE html> <html> <head> <style> .perspective{ perspective:300px; -webkit-perspective:300px; /* for safari */ width:150px; height:150px; background-color:rgb(210,210,210); } .internal1{ transform:rotateY(45deg); -webkit-transform:rotateY(45deg); /* for safari */ transform-style:preserve-3d; -webkit-transform-style:preserve-3d; /* for safari */ width:150px; height:150; background-color:red; } .internal2{ transform:rotateX(45deg); -webkit-transform:rotateX(45deg); /* for safari */ width:150px; height:150px; background-color:blue; } </style> </head> <body> <div class="perspective"> <div class="internal1"> <div class="internal2"> </div> </div> </div> <p>transform-style:preserve-3d;</p> </body> </html>
Run
×
Share