web-dev-qa-db-fra.com

Retourner / refléter une image horizontalement + verticalement avec css

J'essaie d'inverser une image pour l'afficher de 4 manières: originale (sans changement), inversée horizontalement, inversée verticalement, inversée horizontalement + verticalement.

Pour ce faire, je fais ce qui est en dessous, cela fonctionne très bien en dehors du retournement horizontalement + verticalement, avez-vous une idée du pourquoi cela ne fonctionnerait pas?

J'ai fait un violon JS de la question ici: 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";
}
htmlcsstransformcss-filters
42
sam

Essaye ça:

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

Violon mis à jour: https://jsfiddle.net/7/7vg2tn83/1/

Cela ne fonctionnait pas auparavant parce que vous surchargiez le transform dans votre css. Donc au lieu de faire les deux, c'est juste le dernier. Un peu comme si vous faisiez background-color _ deux fois, cela remplacerait le premier.

62
pgruber

Vous pouvez faire une transform: rotate(180deg); pour le retournement horizontal + vertical.

12
Frank Rem

Pour effectuer une réflexion que vous pouvez utiliser, la propriété CSS de transformation ainsi que la fonction CSS de rotation () au format suivant:

transform: rotateX() rotateY();

La fonction rotationX () fera pivoter un élément le long de l'axe des x et la fonction rotationY () fera pivoter un élément le long de l'axe des y. Je trouve mon approche intuitive en ce que l’on peut visualiser la rotation mentalement. Dans votre exemple, la solution utilisant mon approche serait:

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

Le violon JS pour démontrer la solution est https://jsfiddle.net/n20196us/1/

9
Edmond Weiss

Vous ne pouvez appliquer qu'une seule règle de transformation à un sélecteur. Utilisation

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

Je ne sais pas lequel IE acceptera cependant plusieurs filtres.

3
Victor