nach unten

2D-Transformationen #

W3C-Empfehlung

Proprietäre Erweiterungen verschiedener Browser:

-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
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?
Epiphany 3.2.1Symbol: Merkmal wird unterstütztnur für Blockelemente
Midori 0.4Symbol: Merkmal wird unterstütztnur für Blockelemente
rekonq 0.7.0Symbol: Merkmal wird unterstütztnur für Blockelemente
K-Meleon?

Versatz – translate, translateX, translateY #

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type='text/css'>
  .translate {
    -webkit-transform:translate(10px, 10px);
    -moz-transform:translate(10px, 10px);
    -o-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
14
15
<style type='text/css'>
  .scale {
    -webkit-transform:scale(1.2, .7);
    -moz-transform:scale(1.2, .7);
    -o-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
14
15
<style type='text/css'>
  .skew {
    -webkit-transform:skew(20deg, -5deg);
    -moz-transform:skew(20deg, -5deg);
    -o-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
14
15
<style type='text/css'>
  .rotate {
    -webkit-transform:rotate(20deg);
    -moz-transform:rotate(20deg);
    -o-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.