CSS: 2D-Transformationen
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.