html - texto - Voltear/reflejar una imagen horizontalmente+verticalmente con css

invertir imagen espejo css

Question

Estoy tratando de voltear una imagen para mostrarla de 4 maneras: original (sin cambios), volteada horizontalmente, volteada verticalmente, volteada horizontalmente + verticalmente.

Para hacer esto, estoy haciendo lo siguiente, funciona bien aparte del giro horizontal y verticalmente, ¿alguna idea de por qué esto no estaría funcionando?

He hecho un problema de JS con el problema aquí: https://jsfiddle.net/7vg2tn83/

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

.img-vert {
        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
}

.img-hor-vert {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";

        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
}

Answer 1

Para realizar una reflexión que puede utilizar, la propiedad CSS de transformación junto con la función CSS rotate () en este formato:

transform: rotateX() rotateY();

La función rotateX () girará un elemento a lo largo del eje x y la función rotateY () girará un elemento a lo largo del eje y. Encuentro mi enfoque intuitivo en el que se puede visualizar mentalmente la rotación. En su ejemplo, la solución que utiliza 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 de JS para demostrar la solución es https://jsfiddle.net/n20196us/1/

Answer 2

Prueba esto:

.img-hor-vert {
    -moz-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1);
}

Fiddle actualizado: https://jsfiddle.net/7vg2tn83/1/

No funcionaba antes porque estabas anulando la transform en tu css. Así que en lugar de hacer ambas cosas, simplemente hizo la última. Algo así como si background-color dos veces el background-color , anularía al primero.

Answer 3

Puede aplicar una sola regla de transformación para cualquier selector. Utilizar

.img-hor-vert {
    -moz-transform: scaleX(-1) scaleY(-1);
    -o-transform: scaleX(-1) scaleY(-1);
    -webkit-transform: scaleX(-1) scaleY(-1);
    transform: scaleX(-1) scaleY(-1);
    filter: FlipH FlipV;
    -ms-filter: "FlipH FlipV";
}

No estoy seguro de qué IE aceptará múltiples filtros sin embargo.

Answer 4

Puedes hacer una transform: rotate(180deg); para el flip horizontal + vertical.