rotar - rotate css animation

Cómo rotar+voltear elemento con CSS

Question

La propiedad de transformación le permite rotar o voltear, pero ¿cómo puede hacer ambas cosas al mismo tiempo? ¿Decir que quiero rotar un elemento 90 grados y voltearlo horizontalmente? Ambos se hacen con la misma propiedad, por lo que este último sobrescribe el anterior. Aquí hay un ejemplo de violín por conveniencia:

http://jsfiddle.net/DtNh6/

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

Answer 1

Echa un vistazo a esto:

element {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

Para obtener más información, aquí está el enlace: https://css-tricks.com/snippets/css/flip-an-image/

Answer 2

Jugué con jsfiddle, y esto funcionó:

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

Para relacionarlo con tu pregunta, el CSS resultante se parece a

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

Answer 3

Las propiedades pueden ser delimitadas por espacios, como tal.

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

Answer 4

Para las generaciones futuras, una respuesta más completa:

.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);
}