transform: skew nicht auf Hintergrundbild anwenden

[Jan-Frederik Stieler]

Hallo,
ich habe mit transform und skew ein Parallelogram erzeugt.
Nun habe ich aber das Problem dass das Hintergundbild auch schief wird.

kennt da jemand ein Workaround oder hack um das zu umgehen?

Viele Grüße

 

[Quaese]

Hi,

es gibt schon einen Workaround - mit Hilfe der Pseudoklasse :before. Allerdings sind die Größen- und Offsetberechnung des neuen "content"-DIVs sicherlich nicht trivial.

Beispiel (ohne Größen- und Offsetberechnung):

#skewElement{
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 200px;
  -webkit-transform: skew(30deg, 10deg);
  transform: skew(30deg, 10deg);
}
#skewElement:before{
  content: "";
  position: absolute;
  width: 100%;   /* Berechnung evtl. aus Multiplikation mit skew Transformationsmatrix */
  height: 100%;  /* Berechnung evtl. aus Multiplikation mit skew Transformationsmatrix */
  /*
  left: neg. Wert aus obiger Matrixmultiplikation;
  top: neg. Wert aus obiger Matrixmultiplikation;
  */
  z-index: -1;
  background: url(background.png) 0 0 no-repeat;
  -webkit-transform: skew(-30deg, -10deg);
  transform: skew(-30deg, -10deg);
}

Wie in den Kommentaren angedeutet, könnten dir die Transformationsmatrizen zu skew-Transfomationen zur Berechnung der Größen- und Offsetdaten helfen. Informationen hierzu findest du z.B. unter http://www.w3.org/TR/SVG/coords.html.

Wie weit das in der Realität sinnvoll umzusetzen ist, mag ich nicht beurteilen, da es zum einen sicherlich einen erheblichen Rechenaufwand bedeutet, zum anderen zu Rundungsfehlern kommen kann.

Du kannst es ja mal ausprobieren und uns hier anschließend wissen lassen, was dabei rausgekommen ist.

Ciao
Quaese

 

[Jan-Frederik Stieler]

Hi Quase,
danke. ich hab das inzwischen so gelöst, dass ich das Hintergrundbild, welches aus einem Linienraster bestand, um den negativ verzerrt abgespeichert habe.
In meinem Fall ging das noch aber mit anderen komplexeren Grafiken wird das wohl nicht gehen.

Viele Grüße