2D-Transformationen #

W3C-Empfehlung

Versatz – translate, translateX, translateY #

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  .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>
  .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>
  .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>
  .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>
  .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.