2D-Transformationen
W3C-Empfehlung
Versatz – translate, translateX, translateY
Code 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
Code 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
Code 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
Code 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
Code 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.