Comment créer un diaporama incliné (non nivelé)?

Question

Y a-t-il un moyen de créer un diaporama d'images qui tourne de 5 ° par exemple? Je préférerais une solution non-flash. Je vous remercie!

Answer 1

CSS3 possède une propriété rotate que vous pouvez définir. Dans votre feuille de style, il ressemblerait à quelque chose comme ceci:

#mydiv { 
    transform: rotate(45deg); 
} 

Cependant, il est tout à fait nouveau et il a obtenu assez de soutien du navigateur limité en ce moment, il est donc pas idéal.

Certains navigateurs le supportent en utilisant des préfixes de fournisseurs, ce qui signifie qu'il est expérimental, mais vous pouvez quand même les inclure dans votre feuille de style.

Microsoft Internet Explorer dispose d'un mécanisme de rotation complètement différent.

Votre stylesheet final pourrait ressembler à ceci:

#mydiv { 
    -ms-transform: rotate(45deg); /* IE9 beta? */ 
    -moz-transform: rotate(45deg); /* FF3.5+ */ 
    -o-transform: rotate(45deg); /* Opera 10.5 */ 
    -webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */ 
    transform: rotate(45deg); /* CSS3 (for when it gets supported) */ 
    filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */ 
} 

(! Celui que j'ai fourni doit être acceptable pour 45 degrés Vous aurez besoin de travailler les angles vous pour IE)

Cependant, même dans ce cas, vous ne pouvez pas être certain que le navigateur de l'utilisateur le supportera, et il se peut qu'il y ait d'autres bizarreries à gérer.

De même, bien sûr, un élément en rotation sera dégradé en qualité en raison de la pixellisation à l'écran. Cela dépendra de la qualité des algorithmes de rotation du navigateur, mais il y aura toujours une perte de qualité.

En bref, la rotation dans un navigateur (pour le moment au moins) est plus une pièce de jeu qu'une fonctionnalité utile. Mais cela peut être fait.

Answer 2

Vous serez en mesure d'utiliser avec CSS transformations, mais il ne fonctionnera pas dans tous les navigateurs.

Modifier:Here's a solution qui prétend fonctionner avec plusieurs navigateurs.