J'ai une disposition de site sur laquelle je travaille qui a une zone de contenu principale, puis à chacun des quatre coins de la zone de contenu se trouve un graphique d'angle. L'effet global est celui d'un buvard de bureau.
Voici le code pour mon coin supérieur gauche:
.corner-top-left { width:96px ;
height:96px ;
background:url("images/corner.png") no-repeat ;
position:absolute ;
top:-5px ;
left:-5px ;
z-index:3000 ;
}
Plutôt que de créer quatre images d'angle individuelles, ce que j'aimerais faire (si possible) est d'utiliser l'image d'origine (corner.png) et de la faire pivoter en utilisant CSS.
Existe-t-il un moyen compatible avec plusieurs navigateurs pour ce faire?
Merci beaucoup!
CSS pour pivoter de 45 degrés:
.desk
{
width: 50%;
height: 400px;
margin: 5em auto;
border: solid 1px #000;
overflow: visible;
}
.desk img
{
behavior:url(-ms-transform.htc);
/* Firefox */
-moz-transform:rotate(45deg);
/* Safari and Chrome */
-webkit-transform:rotate(45deg);
/* Opera */
-o-transform:rotate(45deg);
/* IE9 */
-ms-transform:rotate(45deg);
/* IE6,IE7 */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";
}
IE6-8 CSS est venu d'ici: propriété de rotation CSS dans IE