Let's also experiment with the
rotateY method to complete this project. This time we'll use this property along with the perspective-origin property trick to create a cool panoramic effect.
First of all we need a panorama image, and then we can use an image editor to cut it into three pieces wherein the central image is roughly twice the size of the other two (for example, 800 x 800 px and 500 x 800 px). Once we've finished this, we can then add these images just before the end of the #container selector:
<p> Ortigia <small>Italy</small> </p> <img class="panorama left" src="img/panorama_left.jpg"> <img class="panorama center" src="img/panorama.jpg"> <img class="panorama right" src="img/panorama_right.jpg">
Now we can use the
rotateY method for both .left and .right, as follows:
.panorama.left{
transform-origin: center right;
transform: rotateY(43deg);
}
.panorama.right{
transform-origin: center left;
transform: rotateY...