• Rotations

    En manque d'imagination, je reprends un attribut: transform:rotate(25deg);

    La rotation d'un élément peut être dans les 2 sens ou dans un sens particulier: rotate(25deg);/rotatex(25deg);/rotatey(25deg);.

     

    <p style="float:left; width: 23vw; height: 80vh; background: url('http://ekladata.com/N9aPovj7IgYOOFV0-6OFPF9ZpCg.jpg'); background-size: 23vw 80vh;">&nbsp;</p>


     

    <p style="float:left; width: 23vw; height: 80vh; transform:translate(8vw,8vh) rotate(25deg); background: url('http://ekladata.com/N9aPovj7IgYOOFV0-6OFPF9ZpCg.jpg'); background-size: 23vw 80vh;">&nbsp;</p>


     

    <p style="float:left; width: 23vw; height: 80vh; transform:translate(8vw,8vh) rotatex(45deg); background: url('http://ekladata.com/N9aPovj7IgYOOFV0-6OFPF9ZpCg.jpg'); background-size: 23vw 80vh;">&nbsp;</p>


     

    <p style="float:left; width: 23vw; height: 80vh; transform:translate(8vw,8vh) rotatey(45deg); background: url('http://ekladata.com/N9aPovj7IgYOOFV0-6OFPF9ZpCg.jpg'); background-size: 23vw 80vh;">&nbsp;</p>


     

    <p style="float: left; width: 23vw; height: 80vh; transform-origin: center left; transform: translate(8vw,8vh) perspective(20vw) rotatey(60deg); background: url('http://ekladata.com/N9aPovj7IgYOOFV0-6OFPF9ZpCg.jpg'); background-size: 23vw 80vh; ">&nbsp;</p>

    En ajoutant de la perspective, l'effet est plus visible car rotatex/y diminue la hauteur ou la largeur, en écrasant l'image; avec la perspective, on voit mieux l'effet


     

    <p style="float: left; width: 23vw; height: 80vh; transform-origin: bottom center ; transform: translate(8vw,-30vh) perspective(20vw) rotatex(60deg); background: url('http://ekladata.com/N9aPovj7IgYOOFV0-6OFPF9ZpCg.jpg'); background-size: 23vw 80vh; ">&nbsp;</p>

    En ajoutant de la perspective, l'effet est plus visible car rotatex/y diminue la hauteur ou la largeur, en écrasant l'image; avec la perspective, on voit mieux l'effet.

    Ne pas oublier de définir le point d'origine de la transformation par: transform-origin, qui est, par défaut: top left=angle haut/gauche

    On peut, à partir de cette disposition, la modifier au survol, par exemple.