No olvides que en la informática un error puede tener varias soluciones, pero aquí compartimos lo más óptimo y mejor.
Prueba esto:
.img-hor-vert
-moz-transform: scale(-1, -1);
-o-transform: scale(-1, -1);
-webkit-transform: scale(-1, -1);
transform: scale(-1, -1);
Violín actualizado: https://jsfiddle.net/7vg2tn83/1/
No funcionaba antes porque estaba anulando el transform en tu CSS. Entonces, en lugar de hacer ambas cosas, solo hizo la última. Algo así como si lo hicieras background-color dos veces, anularía la primera.
puedes hacer un transform: rotate(180deg); para el giro horizontal+vertical.
Para realizar una reflexión, puede usar la propiedad CSS de transformación junto con la función CSS de rotar () en este formato:
transform: rotateX() rotateY();
La función rotarX() rotará un elemento a lo largo del eje x y la función rotarY() rotará un elemento a lo largo del eje y. Encuentro mi enfoque intuitivo en el sentido de que uno puede visualizar la rotación mentalmente. En su ejemplo, la solución usando mi enfoque sería:
.img-hor
transform: rotateY(180deg); // Rotate 180 degrees along the y-axis
.img-vert
transform: rotateX(180deg); // Rotate 180 degrees along the x-axis
.img-hor-vert
transform: rotateX(180deg) rotateY(180deg); // Rotate 180 degrees on both
El violín JS para demostrar la solución es https://jsfiddle.net/n20196us/1/
Si estás de acuerdo, eres capaz de dejar una crónica acerca de qué le añadirías a esta reseña.