​2D-Transformationen #

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>

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>

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>

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>

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>