Durch das Drehen von CSS wird die Größe des Clip-Bildes geändert
Was: Ich versuche, eine Benutzeroberfläche für ein Projekt zu erstellen. Ich wollte mehrere kleine weiße Rechtecke über einem Bild haben und die Rechtecke drehen können, um einen horizontalen Jalousieeffekt zu erzeugen. Alles lief gut in Chrom, aber als ich erkundete, wie es in Safari aussah, wurde ich mit einiger Verwirrung getroffen.
Code-Snippet:
%Vor%Um den Clip zu drehen, verwende ich Folgendes:
%Vor%Problem: In Safari wird der Rechteck-Clip auf weniger als die Hälfte seiner Größe gekürzt, es sei denn, es ist bei rotationX = 0deg.
Jede Hilfe wäre großartig.
Was habe ich versucht: Nun, die Position ist auf absolut eingestellt, was ich wirklich wusste, um in diesem Fall zu überprüfen. Ich bin verloren, was dieses Verhalten verursachen könnte.
Beispiel: Siehe das Bild unten auf 10 Grad eingestellt.
Und hier bei 0 Grad.
Hinweis: Selbst wenn der Clip auf 2 Grad eingestellt ist, bleibt der Clip immer noch weniger als die Hälfte seiner Größe.
2 Antworten
Persönlich würde ich mit einem viel einfacheren Ansatz gehen und keine Art von Rotationen und / oder Transformieren verwenden. Wenn Sie nur den "Blinds" -Effekt erzielen möchten, würde ich einfach die Höhe der Rechtecke animieren und eine viel breitere Unterstützung und weniger anbieterspezifische CSS genießen ...
Schau es dir hier an: Geigen-Demo
HTML
%Vor%CSS
%Vor%JS
%Vor% Ich kann nicht verstehen, warum Sie clip verwenden möchten.
Wenn ich es wäre, würde ich es so machen: Ссылка
HTML
%Vor%CSS
%Vor%Es funktioniert nur in WebKit-Browsern, wenn Sie mehr benötigen, fügen Sie bitte weitere Präfix-Attribute hinzu.