Comment faire pivoter une page web avec du CSS (rotation)

Savez-vous qu’il est très simplement possible de faire pivoter un site web selon un angle précis via du CSS et la propriété -moz-transform ?

La page web subiera une rotation dans sans totalité et le rendu sera fonctionnel au minimum sous le navigateur Firefox.

Voici le code permettant cette rotation, notez que vous devez adapter la valeur de la propriété width en fonction de la taille de votre page web.

body {
	-moz-transform:rotate(-30deg);
	height:auto;
	margin:10px auto;
	position:relative;
	width:1300px;
	z-index:1;
}
  1. C’est geekment bon!!!

  2. Boundal says:

    C’est sympa, mais j’ai du mal à en voir les applications.

  3. Nukium says:

    Hé hé ! A vous d’être créatifs 😉

  4. baloo says:

    ben ça marche pas dans Internet Explorer, cette usine à gaz lourdingue

  5. Lyricoding says:

    A savoir, on peut aussi le faire sur d’autres navigateurs :

    -webkit-transform: rotate(-30deg) scale(1) skew(1deg) translate(0px);
    -moz-transform: rotate(-30deg) scale(1) skew(1deg) translate(0px);
    -o-transform: rotate(-30deg) scale(1) skew(1deg) translate(0px);

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nos partenaires

PrestaShop

PrestaShop nous fait confiance en nous délivrant la certification Expert qui démontre notre expertise concernant leur logiciel e-commerce. Nous avons également obtenu deux certifications officielles PrestaShop Fullstack Developer.

PayPlug

PayPlug est la solution de paiement française qui simplifie le paiement pour l’ensemble des TPE et PME de l'e-commerce, aussi bien en ligne qu’en magasin.

Klaviyo

Klaviyo, leader mondial du marketing automation, propose une solution complète qui s'interface avec vos canaux de vente.