Comment faire pivoter l'élément + flip avec CSS

La transformation de la propriété vous permet de faire pivoter ou retourner, mais comment pouvez-vous faire les deux en même temps? Dire que je veux faire tourner un élément de 90 degrés et de le retourner à l'horizontale? Les deux sont fait avec la même propriété, de sorte que le dernier remplace l'ancien. Voici un exemple de violon pour des raisons de commodité:

http://jsfiddle.net/DtNh6/

transform: rotate(90deg);
transform: scaleX(-1);

source d'informationauteur chinabuffet

  1. 24

    Je jouait avec jsfiddle, et cela a fonctionné:

    $('#photo').css('transform', 'rotate(90deg) scaleX(-1)');

    De le relier à votre question, le CSS ressemble

    transform: rotate(90deg) scaleX(-1);
  2. 9

    Les propriétés peuvent être délimitées par des espaces, comme si.

    transform: rotate(90deg) scaleX(-1);
  3. 3

    Pour les générations futures, une réponse plus complète:

    .rotate2{ /*leaning left <- */
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform:rotate(270deg);
-ms-transform:rotate(270deg);
transform:rotate(270deg);
}
.rotate4{ /*upside down*/
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
transform:rotate(180deg);
}
.rotate6{ /*leaning right -> */
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
.rotate8{ /*vertical flip*/ /*upside-down mirror*/
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
.rotate10{ /*vertical flip*/ /*upside-down*/
-moz-transform: rotate(90deg) scale(1, -1);
-webkit-transform: rotate(90deg) scale(1, -1);
-o-transform: rotate(90deg) scale(1, -1);
-ms-transform: rotate(90deg) scale(1, -1);
transform: rotate(90deg) scale(1, -1);
}
.rotate12{ /*horizontal flip*/ /*left-right mirror*/
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.rotate14{ /*horizontal flip*/ /*left-right mirror*/
-moz-transform: rotate(90deg) scale(-1, 1);
-webkit-transform: rotate(90deg) scale(-1, 1);
-o-transform: rotate(90deg) scale(-1, 1);
-ms-transform: rotate(90deg) scale(-1, 1);
transform: rotate(90deg) scale(-1, 1);
}