Transform & Filters
Transform
The
transform
property can be used to rotate, scale, translate, skew, or even
create custom transformations using matrix functions.
Translation
You can displace an element in one, two, or three dimensions using
the
transform: translate() | translateX() | translateY() |
translateZ() | translate3d()
rule. The
translate()
function takes two values, x-translation (horizontal) and
y-translation (veritcal). The
translateX(),
translateY()
and
translateZ()
functions accepts one value for the axis concerned. The
translate3d()
function takes three values, x-translation, y-translation, and
z-translation. Note that for you to see the effect of translation on
the z-axis, the parent element must have a
perspective
property.
.translate {transform: translate(-10px, -10px);}
.translate-x {transform: translateX(10px);}
.translate-y {transform: translateY(10px);}
.translate3d {transform: translate3d(10px, 10px, 0);}translate(-10px, -10px)
translateX(10px)
translateY(10px)
translate3d(10px, 10px, 0)
Rotation
You can rotate an element around its origin using the
transform: rotate()
rule. The
rotate()
function takes one value, the angle of rotation in degrees. The
angle is measured clockwise, starting from the positive x-axis. You
can also rotate elements in 3d space using the
rotateX(),
rotateY(), and
rotate3d()
functions.
.box {transform: rotate(45deg);}45deg
Scaling
You can scale an element using the
transform: scale()
rule. The
scale()
function takes one value, the scale factor. The scale factor is a
number greater than zero and less than or equal to one. The scale
factor is applied to the element's width and height.
.box {transform: scale(0.75);}scale(.5)
Skewing
You can skew an element using the
transform: skew()
rule. The
skew()
function takes two values, the x-skew and y-skew. The x-skew is the
amount of skew in the horizontal direction, and the y-skew is the
amount of skew in the vertical direction.
.box {transform: skew(10deg, 10deg);}skew(10deg, 10deg)
Filters
The
filter
property accepts a list of filter functions, which can be used to
apply different effects to any element. For these examples, we'll be
applying the filters to an image.
Blur
The
blur()
function can be used to blur an element. The
blur()
function takes a single value, which is the amount of blur to apply
to the element.
img {filter: blur(4px);}
Brightness
The
brightness()
function can be used to adjust the brightness of an element. The
brightness()
function takes a single value, which is the amount of brightness to
apply to the element.
img {filter: brightness(3.7);}Contrast
The
contrast()
function can be used to adjust the contrast of an element. The
contrast()
function takes a single value, which is the amount of contrast to
apply to the element.
img {filter: contrast(1.8);}Drop shadow
The
drop-shadow()
function can be used to add a drop shadow to an element. The
drop-shadow()
function takes four values: the horizontal offset, the vertical
offset, the blur radius, and the color of the shadow. This filter
has a similiar effect to the
text-shadow
and the
box-shadow
properties.
img {filter: drop-shadow(4px 4px 4px deeppink);}Grayscale
The
grayscale()
function can be used to convert an element to grayscale. The
grayscale()
function takes a single value, which is the amount of grayscale to
apply to the element.
img {filter: grayscale(.8);}Hue rotate
The
hue-rotate()
function can be used to rotate the hue of an element. The
hue-rotate()
function takes a single angulare value (30deg | 0.5turn | 1rad | 70grad), which is the amount of hue rotation to apply to the element.
img {filter: hue-rotate(90deg);}Invert
The
invert()
function can be used to invert the colors of an element. The
invert()
function takes a single value, which is the amount of invert to
apply to the element.
img {filter: invert(0.75);}Opacity
The
opacity()
function can be used to change the opacity of an element. The
opacity()
function takes a single value, which is the amount of opacity to
apply to the element. This filter is equivalent to the
opacity
property.
img {filter: opacity(0.5);}poking through
Saturate
The
saturate()
function can be used to adjust the saturation of an element. The
saturate()
function takes a single value, which is the amount of saturation to
apply to the element.
img {filter: saturate(1.5);}Sepia
The
sepia()
function can be used to convert an element to sepia. The
sepia()
function takes a single value, which is the amount of sepia to apply
to the element.
img {filter: sepia(0.8);}Combining filters
Just like with the
transform, the
text-shadow, or the
box-shadow
properties, you can combine filters by separating them with a space.
img {filter: sepia(0.8) invert(1);}Advanced: custom filters
You can also create your own filters using SVG filters. This is a
bit more complex, but it allows you to create effects that are not
possible using the filters presented above, like displacing the
image or applying a color matrix. To apply a custom filter, you
can use the
url(#filter-id)
value.
Some tools exist to play around with SVG filters, such as Yoksel's SVG Filters playground or the SVG Filter Builder.
Backdrop filters
A backdrop filter is a filter that is applied to the elements that
are behind the element on which the filter is applied to. The
backdrop-filter
property can be used to create a variety of effects, such as
blurring, darkening, and lightening the background.
All filters presented above can be used as backdrop filters (although drop-shadow and opacity don't do anything). Here is a list of all the backdrop filters:
Blend modes
The
mix-blend-mode
property can be used to change the blend mode of an element. The
possible values are:
-
normal -
multiply -
screen -
overlay -
darken -
lighten -
color-dodge -
color-burn -
hard-light -
soft-light -
difference -
exclusion: The element is excluded with the backdrop. -
hue -
saturation -
color -
luminosity
Here are all of them applied from left to right: