nach unten

2D-Transformationen #

W3C-Empfehlung

Proprietäre Erweiterungen verschiedener Browser:

-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-moz-transform:rotate(90deg); (obsolet)
-o-transform:rotate(90deg); (obsolet)
transform:rotate(90deg);

Unterstützung durch aktuelle Browser #

Firefox ≥ 3.6Symbol: Merkmal wird unterstütztnur für Blockelemente
Opera ≥ 11.11Symbol: Merkmal wird unterstützt
MSIE ≥ 9Symbol: Merkmal wird unterstützt
Chrome ≥ 17Symbol: Merkmal wird unterstütztnur für Blockelemente
Safari?

Versatz – translate, translateX, translateY #

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
<style type='text/css'>
  .translate {
    -webkit-transform:translate(10px, 10px);
    -ms-transform:translate(10px, 10px);
    transform:translate(10px, 10px);
  }
</style>

<div style='border:1px solid red;width:500px;margin:auto;'>
  <div class='translate' style='background-color:#555;padding:10px;'>
    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur <span class='translate'>sadipscing</span> elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
</div>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Skalierung – scale, scaleX, scaleY #

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
<style type='text/css'>
  .scale {
    -webkit-transform:scale(1.2, .7);
    -ms-transform:scale(1.2, .7);
    transform:scale(1.2, .7);
  }
</style>

<div style='border:1px solid red;width:500px;margin:auto;'>
  <div class='scale' style='background-color:#555;padding:10px;'>
    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur <span class='scale'>sadipscing</span> elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
</div>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Neigung – skew, skewX, skewY #

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
<style type='text/css'>
  .skew {
    -webkit-transform:skew(20deg, -5deg);
    -ms-transform:skew(20deg, -5deg);
    transform:skew(20deg, -5deg);
  }
</style>

<div style='border:1px solid red;width:500px;margin:auto;'>
  <div class='skew' style='background-color:#555;padding:10px;'>
    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur <span class='skew'>sadipscing</span> elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
</div>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Drehung – rotate #

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
<style type='text/css'>
  .rotate {
    -webkit-transform:rotate(20deg);
    -ms-transform:rotate(20deg);
    transform:rotate(20deg);
  }
</style>

<div style='border:1px solid red;width:500px;margin:auto;'>
  <div class='rotate' style='background-color:#555;padding:10px;'>
    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur <span class='rotate'>sadipscing</span> elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
</div>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Ursprung der Transformation – transform-origin #

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style type='text/css'>
  .origin {
    -webkit-transform:rotate(20deg);
    -ms-transform:rotate(20deg);
    transform:rotate(20deg);
    -webkit-transform-origin:top left;
    -ms-transform-origin:top left;
    transform-origin:top left;
  }
</style>

<div style='border:1px solid red;width:500px;margin:auto;'>
  <div class='origin' style='background-color:#555;padding:10px;'>
    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur <span class='rotate'>sadipscing</span> elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
</div>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.