CSS 2D
Transforms
The
CSS3 2D transform feature allows elements to be transformed in 2D space. With
CSS 2D transform feature you can perform basic transform manipulations such as
move, rotate, scale and skew on elements in a two-dimensional space.
A
transformed element doesn't affect the surrounding elements, but can overlap
them, just like the absolutely positioned elements. However, the transformed
element still takes space in the layout at its default (un-transformed)
location. The CSS3 transform property uses the transform functions to
manipulate the coordinate system used by an element in order to apply the
transformation effect.
CSS
translate()
Moves the element from its
current position to a new position along the X and Y axes. This can be written
as translate(tx, ty). If ty isn't specified, its value is
assumed to be zero.
img {
The function translate(200px, 50px) moves the image 200 pixels horizontally along the positive x-axis, and 50 pixels vertically along the positive y-axis.
CSS
rotate()
The rotate() function
rotates the element around its origin (as specified by the transform-origin property)
by the specified angle. This can be written as rotate(a).
img {
The function rotate(30deg) rotates the image in clockwise direction about its origin by the angle 30 degrees. You can use negative values to rotate the element counter-clockwise.
CSS
scale()
The scale() function
increases or decreases the size of the element. It can be written as scale(sx,
sy). If sy isn't specified, it is assumed to be equal to sx.
img {
The function scale(1.5) proportionally
scale the width and height of the image 1.5 times to its original
size. The function scale(1) or scale(1, 1) has no effect on
the element.
CSS skew()
The skew() function
skews the element along the X and Y axes by the specified angles. It can be
written as skew(ax, ay). If ay isn't specified, its value is
assumed to be zero.
img {
See the Pen CSS 2D Transform by PANKAJ (@pankkap) on CodePen.
CSS 3D Transformation
With CSS3 3D transform feature you can
perform basic transform manipulations such as move, rotate, scale and skew on
elements in a three-dimensional space. A transformed element doesn't affect the
surrounding elements, but can overlap them, just like the absolutely positioned
elements. However, the transformed element still takes space in the layout at
its default (un-transformed) location.
CSS Translate3d()
Moves
the element from its current position to a new position along the X, Y and
Z-axis. This can be written as translate(tx, ty, tz). Percentage values
are not allowed for third translation-value parameter (i.e. tz).
The
function translate3d(25px, 25px, 50px) moves the image 25 pixels
along the positive X and Y-axis, and the 50 pixels along the positive
Z-axis.
The 3D transform however uses the three-dimensional coordinate system, but movement along the Z-direction is not always noticeable because the elements exist on a two-dimensional plane (a flat surface) and have no depth.
The perspective and perspective-origin CSS
properties can be used to add a feeling of depth to a scene by making the
elements higher on the Z-axis i.e. closer to the viewer appear larger, and
those further away to the viewer appear smaller.
Note: If you apply 3D transformation
to an element without setting the perspective the resulting effect will not
appear as three-dimensional.
CSS rotate3d()
The rotate3d() function
rotates the element in 3D space by the specified angle around the [x,y,z]
direction vector. This can be written as rotate(vx, vy, vz, angle).
.container{
The function rotate3d(0, 1, 0, 60deg) rotates the image along the Y-axis by the angle 60 degrees. You can use negative values to rotate the element in opposite direction.
CSS scale3d()
The scale3d() function
changes the size of an element. It can be written as scale(sx, sy, sz).
The effect of this function is not evident unless you use it in combination
with other transform functions such as rotate and the perspective, as shown in
the example below.
.container{
The function scale3d(1, 1, 2) scales the elements along the Z-axis and the function rotate3d(1, 0, 0, 60deg) rotates the image along the X-axis by the angle 60 degrees.
Flipping Card
See the Pen CSS 3D Transform - Rotate by PANKAJ (@pankkap) on CodePen.