DEV Community

Cover image for CSS Transform in just 15 minutes!
Abhis
Abhis

Posted on

CSS Transform in just 15 minutes!

#codenewbie #css #html #career

In this tutorial we are going to learn hoW to css transform an element In deep , so sit back and go througH the content.

If you haven't read my previous articles , i must say go & read them by yourself!

CSS transforms are a collection of functions that allow to shape elements in particular ways:

  • translate: moves the element along up to 3 axis (x,y and z)
  • rotate: moves the element around a central point
  • scale: resizes the element
  • skew: distorts the element

transform properties

There are 3 CSS transform properties available:

  • transform defines which transform function to use (translate, rotate, scale...)
  • transform-origin allows to modify the origin point of a transformation
  • transform-style is for 3d settings

Note that unlike background and border, transform is not a shorthand property.

We'll only use transform here.

Doesn't break the Flow

To prevent unexpected behavior, transformed elements do not affect the Flow. Whether rotated, scaled or translated, they won't affect other elements.

translate

The translate() function allows to move an element across the plane (on the x and y axis). It accepts either:

  • 1 parameter: moves the element along the x axis
  • 2 parameters: first value is for the x axis, second for the y one

It's like using relative positioning with left and top values.

Let's redo our circuit animation using translation instead of left/top positioning:

@keyframes translating {
  0%  { transform: translate(0, 0);}
  25% { transform: translate(240px, 0);}
  50% { transform: translate(240px, 140px);}
  75% { transform: translate(0, 140px);}
  100%{ transform: translate(0, 0);}
}
p{ animation: translating 4s linear infinite;}
Enter fullscreen mode Exit fullscreen mode 
<div class="result" id="translate-animation">
  <p>Hello</p>
</div>


<style type="text/css">
#translate-animation{ height: 200px; padding: 0; width: 300px;}
#translate-animation p{ animation: translating 4s linear 0s infinite; background: turquoise; color: white; height: 60px; line-height: 60px; margin: 0; position: absolute; text-align: center; width: 60px;}

@keyframes translating {
  0%  { transform: translate(0, 0);}
  25% { transform: translate(240px, 0);}
  50% { transform: translate(240px, 140px);}
  75% { transform: translate(0, 140px);}
  100%{ transform: translate(0, 0);}
}
</style>
Enter fullscreen mode Exit fullscreen mode

Remember: transform is the CSS property, translate() is the CSS value attached to that property (and also happens to be a function).

You can use translateX() and translateY() to only move your element along the x and y axis respectively.

rotate

The rotate() function allows to make an element revolve around a fixed point. By default, it revolves around the element's center. Think of it as vinyl being played on a turntable.

rotate() accepts only 1 parameter, which is an angle value defined in degrees deg, gradians grad, radians rad or turns turn (with 1 turn being equivalent to a full circle).

@keyframes rotating {
  0%  { transform: rotate(0deg);}
  100%{ transform: rotate(360deg);}
}
p{ animation: rotating 4s linear infinite;}
Enter fullscreen mode Exit fullscreen mode

lET'S LEARN IN BRIEF! 

<div class="result" id="rotate-animation">
  <p>Vinyl</p>
</div>

<style type="text/css">
#rotate-animation{ padding: 2rem;}
#rotate-animation p{ animation: rotating 4s linear 0s infinite; background: slateblue; border-radius: 60px; color: white; height: 120px; line-height: 120px; margin: 0; text-align: center; width: 120px;}

@keyframes rotating {
  0%  { transform: rotate(0deg);}
  100%{ transform: rotate(360deg);}
}
</style>
Enter fullscreen mode Exit fullscreen mode

scale

The scale() function allows to resize an element. It can either expand or shrink it. The function accepts either:

  • 1 parameter: the element is resized uniformily in height and width
  • 2 parameters: the first value resizes the element horizontally, the second one vertically

The range of possible value is:

  • 1: the element retains its original size
  • 2: the element doubles in size
  • 0.5: the element is half of its size
  • 0: the element basically disappears (as its height and width are equal to zero)
  • -1: the element is mirrored 
@keyframes scaling {
  0%  { transform: scale(1);}
  20%{ transform: scale(2);}
  40%{ transform: scale(0.5);}
  60%{ transform: scale(0);}
  80%{ transform: scale(-1);}
  100%{ transform: scale(1);}
}
p{ animation: scaling 10s steps(1) 0s infinite;}
Enter fullscreen mode Exit fullscreen mode 
<div class="result" id="scale-animation">
  <p><strong>scale(1)</strong>: normal size</p>
  <p><strong>scale(2)</strong>: double size</p>
  <p><strong>scale(0.5)</strong>: half size</p>
  <p><strong>scale(0)</strong>: zero size (invisible)</p>
  <p><strong>scale(-1)</strong>: mirrored</p>
  <div>Scaling</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
<style type="text/css">
#scale-animation{ padding: 2rem;}
#scale-animation p{ animation: scaling-toggle 10s steps(1) 0s infinite forwards; background: white; color: grey; left: 2rem; margin: 0; opacity: 0; padding: 0 0.5em; position: absolute; top: 2rem; z-index: 1;}
#scale-animation p:first-child{ left: 0; position: relative; top: 0;}
#scale-animation p:nth-child(2){ animation-delay: 2s;}
#scale-animation p:nth-child(3){ animation-delay: 4s;}
#scale-animation p:nth-child(4){ animation-delay: 6s;}
#scale-animation p:nth-child(5){ animation-delay: 8s;}
#scale-animation p strong{ content: ""; display: inline-block;}
#scale-animation div{ animation: scaling 10s linear 0s infinite; background: goldenrod; border-radius: 60px; color: white; height: 120px; line-height: 120px; margin-top: 2rem;; text-align: center; transition: all 100ms linear; width: 120px;}

@keyframes scaling {
  0%  { transform: scale(1);}
  19% { transform: scale(1);}
  20% { transform: scale(2);}
  39% { transform: scale(2);}
  40% { transform: scale(0.5);}
  59% { transform: scale(0.5);}
  60% { transform: scale(0);}
  79% { transform: scale(0);}
  80% { transform: scale(-1);}
  99% { transform: scale(-1);}
  100%{ transform: scale(1);}
}

@keyframes scaling-toggle {
  0%  { opacity: 1;}
  20% { opacity: 0;}
  100%{ opacity: 0;}
}
Enter fullscreen mode Exit fullscreen mode

Like translate(), the scale() function has x and y versions: scaleX() and scaleY() to resize horizontally and vertically respectively.

skew

The skew() function allows to distort an element, by dragging its sides along a line basically.

This transform function is rarely used, as its effects are quite unpredictable, and its results not necessarily appealing. Nevertheless, let's see how it works.

Like scale(), the skew() functions accepts either:

  • 1 parameter: the element is distorted horizontally
  • 2 parameters: the first value distorts the element horizontally, the second one vertically

And like rotate(), skew() only accepts angle values like degrees deg.

@keyframes skewing {
  0%  { transform: skew(0deg);}
  20% { transform: skew(10deg);}
  40% { transform: skew(45deg);}
  60% { transform: skew(90deg);}
  80% { transform: skew(120deg);}
  100%{ transform: skew(0deg);}
}
p{ animation: skewing 10s steps(1) 0s infinite;}
Enter fullscreen mode Exit fullscreen mode 
<div class="result" id="skew-animation">
  <p><strong>skew(0deg)</strong>: no distortion</p>
  <p><strong>skew(10deg)</strong>: subtle horizontal distortion</p>
  <p><strong>skew(45deg)</strong>: quarter distortion</p>
  <p><strong>skew(90deg)</strong>: half distortion (invisible)</p>
  <p><strong>skew(120deg)</strong>: same as -60deg</p>
  <div>Skewing</div>
</div>

<style type="text/css">
#skew-animation{ padding: 2rem;}
#skew-animation p{ animation: scaling-toggle 10s steps(1) 0s infinite forwards; background: white; color: grey; left: 2rem; margin: 0; opacity: 0; padding: 0 0.5em; position: absolute; top: 2rem; z-index: 1;}
#skew-animation p:first-child{ left: 0; position: relative; top: 0;}
#skew-animation p:nth-child(2){ animation-delay: 2s;}
#skew-animation p:nth-child(3){ animation-delay: 4s;}
#skew-animation p:nth-child(4){ animation-delay: 6s;}
#skew-animation p:nth-child(5){ animation-delay: 8s;}
#skew-animation div{ animation: skewing 10s linear infinite; background: tomato; color: white; height: 60px; line-height: 60px; margin-top: 2rem;; text-align: center; transition: all 100ms linear; width: 120px;}

@keyframes skewing {
  0%  { transform: skew(0deg);}
  19% { transform: skew(0deg);}
  20% { transform: skew(10deg);}
  39% { transform: skew(10deg);}
  40% { transform: skew(45deg);}
  59% { transform: skew(45deg);}
  60% { transform: skew(90deg);}
  79% { transform: skew(90deg);}
  80% { transform: skew(120deg);}
  99% { transform: skew(120deg);}
  100%{ transform: skew(180deg);}
}

@keyframes skewing-toggle {
  0%  { opacity: 1;}
  20% { opacity: 0;}
  100%{ opacity: 0;}
}
</style>
Enter fullscreen mode Exit fullscreen mode

3d functions

We've seen how transform functions operate on a plane, along the x and y axis.

For example:

  • translate() with up to 2 parameters:

    • translate(x)
    • translate(x,y)

  • translateX() as x only

  • translateY() as y only

But all these functions also have a 3d version.

For example, translate() has a translate3d() version that performs transformation along 3 dimensions, which means it includes the z axis as well (and as such, a standalone translateZ() function exists as well).

The z parameter basically make the element move closer and further, whether we increase or decrease its value. It's like zooming in and out.

@keyframes zooming {
  0%  { transform: translate3d(0, 0, 0);}
  100%{ transform: translate3d(0, 0, 200px);}
}
p{ animation: zooming 5s alternate;}
Enter fullscreen mode Exit fullscreen mode 
<div class="result" id="zoom-animation">
  <div>Original</div>
  <p>Transformed</p>
</div>

<style type="text/css">
#zoom-animation{ padding: 2rem; perspective: 500;}
#zoom-animation div,
#zoom-animation p{ background: midnightblue; color: white; height: 200px; line-height: 200px; margin: 0; position: relative; text-align: center; width: 200px;}
#zoom-animation p{ animation: zooming 5s alternate infinite both; background: limegreen; left: 2rem; opacity: 0.7; position: absolute; top: 2rem;}

@keyframes zooming {
  0%  { transform: translate3d(0, 0, 0);}
  100%{ transform: translate3d(0, 0, 200px);}
}
</style>
Enter fullscreen mode Exit fullscreen mode

The green block rise 200px "upwards", as if coming closer to us, along the z axis.

perspective: 500; needs to be applied to the parent element in order for the 3d space to become active. Alternatively, transform: perspective(500px); can be used as well.

Hope , this article helps you.

READ NEXT: 

        Read my more 10 minutes series.
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

giuliano1993 profile image

Color Palette is served with ShadCn Theme Editor

Giuliano1993 -

jarvisscript profile image

What a busted water heater and wet boxes taught me about flexbox.

Chris Jarvis -

travah1 profile image

Vanilla JavaScript Login Status Monitor

travahnetshisaulu -

abbeyperini profile image

10 Tips from 10 Tech Conferences in 2024

Abbey Perini -