Bitte warten...

CSS: 2D-Transformationen

W3C-Empfehlung

Versatz – translate, translateX, translateY

Code kopieren
<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

Code kopieren
<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

Code kopieren
<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

Code kopieren
<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

Code kopieren
<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.