Since we're dealing with a real 3D environment, we can try to develop more interesting effects using the same basic idea. For example, what if we rotate an element instead of simply moving it towards us? Let's try! First of all we need to add a few more images to our gallery; this time we also decided to add some decorative text, as follows:
<!-- DECKS --> <img class="rotatextop" src="img/picture15.jpg"> <p> Keremma Dunes <small>Bretagne, Finistére</small> </p> <img class="rotatexbottom" src="img/picture16.jpg"> <p class="depth-e"> Rennes <small>Bretagne</small> </p> <img src="img/picture17.jpg">
Then we can use the
rotateX
transformation method on the images:
.rotatextop{ transform-origin: top center; transform: rotateX(15deg); } .rotatexbottom{ transform-origin: bottom center; transform: rotateX(-15deg); }
A few more CSS properties to also style the paragraphs a little...