With CSS3 came new ways to position and alter elements. Now general layout techniques can be revisited with alternative ways to size, position, and change elements. All of these new techniques are made possible by the transform property.
div {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
Elements may be distorted, or transformed, on both a two-dimensional plane or a three-dimensional plane. Two-dimensional transforms work on the x and y axes, known as horizontal and vertical axes. Three-dimensional transforms work on both the x and y axes, as well as the z axis.
<figure class="box-1">Box 1</figure>
<figure class="box-2">Box 2</figure>
.box-1 {
transform: rotate(20deg);
}
.box-2 {
transform: rotate(-55deg);
}
To see how it works, here’s a Demo
<figure class="box-1">Box 1</figure>
<figure class="box-2">Box 2</figure>
.box-1 {
transform: scale(.75);
}
.box-2 {
transform: scale(1.25);
}
To see how it works, here’s a Demo
<figure class="box-1">Box 1</figure>
<figure class="box-2">Box 2</figure>
<figure class="box-3">Box 3</figure>
.box-1 {
transform: translateX(-10px);
}
.box-2 {
transform: translateY(25%);
}
.box-3 {
transform: translate(-10px, 25%);
}
To see how it works, here’s a Demo
<figure class="box-1">Box 1</figure>
<figure class="box-2">Box 2</figure>
<figure class="box-3">Box 3</figure>
.box-1 {
transform: skewX(5deg);
}
.box-2 {
transform: skewY(-20deg);
}
.box-3 {
transform: skew(5deg, -20deg);
}
To see how it works, here’s a Demo
<figure class="box-1">Box 1</figure>
<figure class="box-2">Box 2</figure>
.box-1 {
transform: rotate(25deg) scale(.75);
}
.box-2 {
transform: skew(10deg, 20deg) translateX(20px);
}
To see how it works, here’s a Demo