Sie können Bilder mit CSS umdrehen! Mögliches Szenario: nur eine Grafik für einen „Pfeil“ zu haben, sie aber umzudrehen, damit sie in verschiedene Richtungen zeigt.
.flip-horizontally {
transform: scaleX(-1);
}Sehen Sie, wie hier ein Pfeil verwendet wird, um in beide Richtungen zu zeigen
Sehen Sie den Stift
Bild spiegeln von CSS-Tricks (@css-tricks)
auf CodePen.
Rotation ist eine weitere Möglichkeit, was bedeutet, dass unser einzelner Pfeil viele Richtungen einschlagen könnte
Sehen Sie den Stift
Bild spiegeln von CSS-Tricks (@css-tricks)
auf CodePen.
Das ist auch irgendein Bild, oder eigentlich jedes beliebige Element.
Sehen Sie den Stift
Bild spiegeln von CSS-Tricks (@css-tricks)
auf CodePen.
Alte Vendor-Präfixe
Für die Nachwelt
img {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Kann das auf Hintergrundbilder angewendet werden? Wenn ja, wäre es perfekt für Dinge wie Buttons und schattierte Boxen.
Aber man kann es auf ein Div mit einem Hintergrundbild anwenden :)
Welche Zeile ist für welchen Browser?
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: “FlipH”;
Aber im Ernst, Microsoft sollte IE komplett abschaffen und das Leben ein wenig einfacher machen.
Danke!
@Pat
-o- = Opera
-moz- = Firefox/Mozilla
-webkit- = Safari, Chrome
-ms- = Microsoft also IE & Edge
Müsste man die Koordinaten auch umkehren, wenn man das auf ein Sprite-Bild anwendet?
Nein. Transformationen werden nach dem Rendern des Inhalts angewendet, als letzter Schritt.
Es kann nicht auf Hintergrundbilder angewendet werden. Nur auf Elemente.
Tatsächlich kann es auf Hintergrundbilder angewendet werden… Ich habe es getestet und es funktionierte gut mit
-Fire Fox 3.6.13
-Chrome 8.0.552.237
-IE 8.0.7600
PS: Bei der Verwendung von IE wird oben auf der Seite die „ActiveX“-Informationsleiste angezeigt, die den Benutzer auffordert, blockierte Inhalte zuzulassen, sonst wird nur die nicht gespiegelte Version des Hintergrundbildes angezeigt. Das ist sehr ärgerlich und kann Benutzer von der Seite abschrecken, die denken, dass sie ein verstecktes Skript herunterlädt :)
Außerdem möchte ich hinzufügen, dass beim Verwenden des Spiegelns für Hintergrundbilder nicht nur das „background-image“ gespiegelt wird, sondern auch seine „background-position“ für sowohl die „X“- als auch die „Y“-Werte, sodass Sie auch diese umkehren müssen :)
Wie haben Sie nur den Hintergrund gespiegelt?
Aber wenn Sie den gesamten Body-Inhalt in einen übergeordneten Container verpacken und das Bild als Hintergrund festlegen, können Sie das tun. Ich weiß, dass dies ein alter Beitrag ist.
Beim Betrachten in einem RSS-Reader wird das gespiegelte Bild nicht gespiegelt :)
Hier auch ;) (Apple Mail-App)
Richtig… das liegt daran, dass das CSS hier auf der Demoseite angewendet wird. RSS-Reader wenden ihr eigenes CSS auf ihre Seiten an. Wenn Sie versuchen, Ihr CSS in diese zu erzwingen, müssen Sie Inline-Stile verwenden und selbst dann ist es keine Garantie.
RSS-Reader und Mail-Apps haben ihre eigene Art, HTML und CSS zu interpretieren und unterstützen normalerweise nur einige Codes. CSS funktioniert oft nicht richtig. Wenn Sie die volle Kraft von CSS nutzen möchten, müssen Sie Ihren Inhalt in einem modernen Browser anzeigen.
Wie wäre es, dies für eine Spiegelung zu verwenden? Bild vertikal spiegeln und die Deckkraft reduzieren? Möglich?
Kombinieren Sie die Deckkraft mit einem CSS3-Verlauf?
Meine Vorhersage: JA. Es wird in jedem Browser außer IE perfekt funktionieren.
Schade, dass Sie Gijs Stegehuis nicht die nötige Anerkennung zukommen lassen.
Ich brauchte „image-rendering: -moz-crisp-edges;“, damit dies mit einem GIF-Pfeil in Firefox unter OSX ordnungsgemäß funktionierte. Ohne diese Eigenschaft wurde es sehr verschwommen dargestellt.
Danke, ich hatte dieses Problem auch.
Perfekt – endlich – ausgezeichnet! Ist das eine reine CSS3-Eigenschaft? Wie ist die Cross-Browser-Kompatibilität?
Das wäre gut für eine Mitgliedersite als Logout-Seite. Machen Sie die Logout-Seite zu einer gespiegelten Version der Login-Seite. Oder eine Variation der Idee. Vielleicht kann sogar ein Bild auf der Login-Seite auf der Logout-Seite gespiegelt werden. Nur ein Gedanke.
Nein.
Ich habe keine Ahnung, was Sie meinen. Die Login-Felder usw. spiegeln? Und normalerweise gibt es keine Logout-Seite, man klickt einfach auf einen Button und ist ausgeloggt.
Das funktioniert bei mir in IE8 nicht. Das Bild wird nicht gespiegelt.
Außerdem wird in IE8-Kompatibilitätsmodus das Bild tatsächlich gespiegelt, aber wenn ich die obere Position mit jQuery animiere, verschwindet das Bild, wenn mein Bild „springt“ (ich habe Kirby vorwärts und rückwärts auf dem Bildschirm rennen lassen, springend, wenn geklickt wird). Nicht, dass das Bild nur beim Spiegeln verschwindet.
Dies hätte tatsächlich gute Anwendungen für eine internationale Website, die zwischen Links-nach-Rechts- und Rechts-nach-Links-Formatierung wechseln musste. Die meisten Websites sind schlecht darin, eine ordnungsgemäße Rechts-nach-Links-UX für Arabisch und Hebräisch zu bieten.
Hallo zusammen,
Ich verwende diesen CSS-Code, um ein PNG-Bild mit transparentem Hintergrund zu spiegeln, und ich erhalte ein schreckliches Ergebnis (unter IE 7, 8 oder 9).
Nach dem Spiegeln bekommt das Bild eine Art schiefen schwarzen Umriss... Irgendwelche Vorschläge?
Viele Grüße,
Hier ist, wenn Sie ein Bild möchten, das sich als Übergang spiegelt
img { display: block; height: 400px; width: 400px; -webkit-transition: all 1s; }
img:hover { display: block; eight: 400px; width: 400px; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; -webkit-transition: all 1s; }Können wir diese in Animationen verwenden? Wenn ja, wie?
Entschuldigung
img {
display: block;
height: HÖHE IHRES BILDES;
width: BREITE IHRES BILDES;
-webkit-transition: all 1s;
-moz-transition: all 1s;
}
img:hover {display: block;
height: HÖHE IHRES BILDES;
width: BREITE IHRES BILDES;
BILD SPIEGELN CODE
-webkit-transition: all 1s;
-moz-transition: all 1s;
}
Getestet und es funktioniert
Das ist wirklich sehr schön..
Wenn wir dies mit :after kombinieren, kann dies wahrscheinlich verwendet werden, um reine CSS-Spiegelungen mit Nicht-Webkit-Browsern zu erzeugen.
Sehr, sehr gut…. danke
Danke Kumpel,
Ich habe nach demselben gesucht und bei Google kam nur dieses Flip-Diashow und alles. Vielen Dank für diesen Trick…
Wow, toller Artikel. Ich habe Ihren Code verwendet, um das Hintergrundbild zu drehen, und es funktioniert gut.
Danke für das Teilen eines schönen Artikels.
Ich muss ein Bild zerlegen und es soll sich auch wieder zusammensetzen. Oder gibt es etwas Neues, das man nur mit der initialen Version von CSS machen kann? Gib mir ein paar Ideen, Mann.
Meinst du wie eine Explosion?
Mit JavaScript (und JQuery) könntest du leicht kleine Blöcke mit deinem Bild im Hintergrund erstellen (und background-position je nachdem, wo sich jeder Block befindet), dann jeden Block unabhängig bewegen (und sogar mit CSS-Transformationen drehen), um es so aussehen zu lassen, wie du es willst.
Dann sollte das Wiederzusammensetzen auch ziemlich einfach sein.
Verstehst du, was ich meine?
Ohne JavaScript glaube ich nicht, dass das möglich ist. Ich meine, es ist eine ziemlich spezifische Situation, und es wäre unglaublich, eine reine CSS-Lösung zu haben.
Oh. Meine Nachricht war für Bala. Mein Fehler.
Mein gespiegeltes Bild wird aus irgendeinem Grund verschwommen dargestellt? Seltsam, aber ansonsten ein toller Trick.
Verwenden Sie
image-rendering: -moz-crisp-edges;, wie von Gijs Stegehuis dort oben gesagt.Sehr gut!
Kann ich eine horizontale Spiegelung auf ein vertikal gespiegeltes Bild anwenden, d.h. was wir bekommen, wenn wir eine horizontale Spiegelung in vertikaler Richtung anwenden?
Nur in IE (filter: FlipH; -ms-filter: “FlipH”; ) verursacht einen schwarzen Hintergrund, WENN (und hier ist das Seltsame), wenn das übergeordnete, geschichtete Div abgerundete CSS-Elemente angewendet hat. (in IE war meine Klasse =’round’ -ms-border-radius:20px; ). Behalten Sie das im Hinterkopf, wenn Sie 5 Stunden nach einem „Es wurde schwarz“-Bug in IE suchen. Ich habe die abgerundete Klasse entfernt, und keine Schwärze. Seltsam.
Was ich wissen will: WTF sind Asia Mustards?
Danke Kumpel – genau das, was ich gesucht habe!
Danke Chris, es ist wirklich nützlich.
Nützliche Informationen.
Vielen Dank
Sehr gutes und nützliches Konzept.
Hallo, danke für Ihren Artikel.
Ich benutze das, aber auf der Y-Achse
Ich würde gerne wissen, ob es möglich ist – und wie – diesen Effekt mit einem Scroll zu erzeugen.
Ich meine, das Bild dreht sich um, wenn ich nach unten scrolle.
Irgendwelche Ideen? ?
Danke
Das ist eine gute Praxis, wir könnten sie verwenden, um Bilder, Icons und auch für Icon-Fonts zu spiegeln!
Für das Spiegeln von Hintergründen kann ich sagen, dass dies das gesamte Element spiegelt, nicht nur die Grafik darin, sodass Sie es nicht nur zum Spiegeln von Hintergründen verwenden könnten, es würde auch Text spiegeln!
Leider müssen wir noch etwas warten („vielleicht Monate, vielleicht Jahre“), um uns darauf verlassen zu können, da derzeit viele Leute IE8 zum Surfen auf Websites verwenden.
„Spiegelröhre“
Fügen Sie beliebige Youtube- oder Vimeo-Video-URLs ein, und Sie können sie mit horizontal gespiegeltem Ton sehen (funktioniert nicht auf Mobilgeräten und Internet Explorer).
http://concreteage.blogspot.jp/p/youtubevimeourl-function-youtube-this.html
Auf den Punkt gebracht. Danke für den Trick.
Hallo
Kürzlich habe ich „Mirrortube“ aktualisiert.
Es wurde möglich, jedes Youtube- oder Vimeo-Video in monochrom abzuspielen.
Bitte überprüfen Sie es.
MirrorTube
http://concreteage.blogspot.jp/p/youtubevimeourl-function-youtube-this.html
Es ist jetzt scale(-1)
Ich bin auf diesen Code gestoßen, der für ein Pfeil-Hintergrundbild verwendet wurde und je nach Klasse nach unten oder oben zeigte.
FlipV funktionierte für die meisten Browser, verursachte aber ein Problem in IE9, indem der Pfeil sowohl nach oben als auch nach unten angezeigt wurde, sodass er sich in ein Quadrat verwandelte!
Ich habe es behoben, indem ich einfach transform verwendet habe (obwohl ich dann den Filter zurücksetzen musste).
Ich hoffe, das hilft jemandem mit einem ähnlichen Problem.
Danke für die Veröffentlichung dieser Korrektur!
Ich habe erfolgreich ein Bild beim Anklicken gespiegelt. Danke für die Info! Aber wie spiegelt man es zurück? Das Ändern des ID-Werts auf „regular“ funktioniert nicht. Muss man dafür nicht auch einen CSS-Stil erstellen?
Ein Spiegeleffekt, der in IE funktioniert, ist auf der Website seeveeze sichtbar. Kann die URL nicht posten, aber suchen Sie einfach seeveeze bei Google http://www.seeveeze.com
Was ist falsch mit transform: rotateY(180deg)?
Manchmal braucht man nicht nur die Drehung. Man braucht eine Spiegelreflexion und das Spiegeln bewirkt Wunder
Hier ist mein Beispiel zum vertikalen Spiegeln eines Divs
https://uisnip.appspot.com/?share=/s/9tjc3v4b5wt6mcm/VerticalFlip-2?dl=0
Danke! Es ist die einfachste und leichteste Art, ein Element zu spiegeln, die ich im Netz gefunden habe. Herzlichen Glückwunsch.
Elegantes CSS-Snippet, danke :)
Bilder spiegeln kann bereits einen Mehrwert bieten, aber wenn ein Titel oder Wörter darauf sind, denke ich, ist es schwierig, diesem Bild eine Bedeutung zu geben.
http://www.highhdwallpapers.com/
Man kann Bilder mit CSS spiegeln! Mögliches Szenario: Nur eine Grafik für einen „Pfeil“ zu haben, sie aber herumzudrehen, um in verschiedene Richtungen zu zeigen.
chasse au trésor dofus
Schönes Skript. Funktioniert – 100%! Danke ⇨✪✪✪✪✪
Cool! 100% funktioniert auf meinem Blog (#firefox#)
Das spiegelt nicht das echte Bild? Es zeigt das Bild nur gespiegelt, oder? Ich habe eine Website online ausprobiert, die meine Bilder gespiegelt und auf Imgur hochgeladen hat. Das war cool ( http://flippicture.com/). Aber ich frage mich wirklich, wie sie das machen?? Würde mir jemand die Gunst erweisen, mich aufzuklären?
Danke! Es ist so einfach zu implementieren. Habe es verwendet, um ein Font Awesome-Icon horizontal zu spiegeln und es hat funktioniert!
Funktioniert für jedes Element, sogar für Videos.
Wie verwende ich das, ABER nur für bestimmte Bilder? Mit diesem Code werden ALLE meine Bilder auf der Webseite gedreht, und ich möchte, dass dies nur für bestimmte passiert.
Hallo Paul! Versuchen Sie, eine eindeutige Klasse anstelle des allgemeinen img-Selectors zu verwenden. Ersetzen Sie zum Beispiel „img“ durch etwas wie „.image-flip“ und fügen Sie diesen Klassennamen zu den Bildern hinzu, die Sie spiegeln möchten. :)
Sie können verwenden: transform: rotateY(180deg);