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