CSS Perspective The perspective property is a cool little features that is able to give your elements a 3 dimensional look In a nutshell the perspective property works by defining how far the object is away from the user Hover the mouse over the element to see another version transition into a perspective view also uses the transition aspect to give a slow change style body height 200pt div1 div2 position absolute left 100px top 100px width 50px height 50px border 1px solid blue transform translateZ 0 transition transform 1s div1 hover transform perspective 1500px translateX 155px rotateY 45deg scale 1 1 style div id div2 div div id div1 div Interesting todo project would be to take this further using Javascript create lots of square tiles and construct a spherical surface that rotates madeup of squares with different colors or textures on each one Hvae the dome earth sphere rotate possibly have it interact with the mouse cursor as well
form translateZ 0 transition transform 1s div1 hover transform perspective 1500px translateX 155px rotateY 45deg scale 1 1 style div id div2 div div id div1 div Interesting todo project would be to take this further using Javascript create lots of square tiles and construct a spherical surface that rotates madeup of squares with different colors or textures on each one Hvae the dome earth sphere rotate possibly have it interact with the mouse cursor as well