2D and 3D animations using CSS with interactive examples

2D and 3D animations provide developers with tools to manipulate an element on the screen, including position, size, perspective and rotation.

2D CSS Transform

To use 2D animation, you must apply the Transform property to an element.

1 
transform: translate(20px, 50px),
2 
transform: translate(10%, -50px),
3 
transform: translateX(2em),
4 
transform: translateY(-1rem)

As you can see from example above, you can use positive and negative values and different length units.

Examples of 2D animation

Box width: 0px, height: 0px, Circle: 48px x 48px


{
  transform: translate(-24px, -24px);
  position: absolute;
  transition: transform 0.3s;
  width: 48px;
  height: 48px;
  border: 2px solid var(--code);
  background: var(--accent);
  border-radius: 50%;
}

In the example above, I'm using px values to move yellow circle around the box. So, I know that height is 250px (-2px of the border) and the Circle's width/height is 48px, so the formula is
(boxWidth - 48) * currentStep / 100
where currentStep is 10, 20 ... or 100

Why don't I use % for length? Wouldn't that be simpler?
transform: translate(50%, 50%)

That is the fun part. The Circle knows only its own dimensions but nothing about the parent box. Instead, it uses the element size itself. So, when we translate for 100%, it would move precisely at the element's size, in this case 48px, to whatever direction.

Toggle between px and % to see the difference. So, when a Circle is pushed by a percentage, it will move in a direction based on its own size. 100% right would mean "moving right exactly the size of itself."

This is a powerful part of the translate()! It is probably the only way to move an element exactly 50% in any direction without knowing its size.

transform: translate(0, 0%)

Some block
Some block

Skew, Size and Rotation

Why not bend some elements, right? If you want to do that, Skew will probably help you most but play with all of them and see how they change an element.

You can apply Skew, scale and rotate rules into one rule like so:

1 
transform:
2 
    skew(0deg, 0deg)
3 
    scale(1, 1)
4 
    rotateZ(0deg) rotateX(0deg) rotateY(0deg)
transform: skew(0deg, 0deg) 0 deg
0 deg
transform: scale(1, 1) 1
1
transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg) 0 deg
0 deg
0 deg

Dive deeper with MDN and learn more about transform.

3D CSS (kind of)

By combining different techniques, we can create 3D effects. The best part? The example below doesn't use any JavaScript.

This is front
This is back

Thomas C. Green

Thomas C. Green

4007 Elliott Street

Center Ossipee, NH 03814

Here is an example of how to implement such a card:

1 
<div class="panel">
2 
    <div class="face front">This is front</div>
3 
    <div class="face back">This is back</div>
4 
</div>

There is a bit more to CSS. First, we define a Panel, which would keep two divs for the Front and Back.

1 
.panel {
2 
  position: relative;
3 
  height: 200px;
4 
  width: 200px;
5 
}

There, I defined shared props. The main thing is that I hide backface-visibility, because I don't want to show it; instead, I will show the other div's part. I removed designs like colours and flex boxes to simplify implementation. I also added animation with 1s duration.

1 
.face {
2 
  position: absolute;
3 
  backface-visibility: hidden;
4 
  transition: transform 1s;
5 
}

The last bit is to make that "magical" swap between the front and the back face

So, both of those faces are defined as position absolute. That means the top part is visible by default, and the other is hidden. Now I tell that the front is rotateY(0), which means - do nothing.

The back face is set to rotateY(179.9), which means that that side is rotated away for now.

Why 179.9? Well, the browser will always turn on the shortest route. That way I make sure it will always turn in the one possible way.

The last part I do opposite for when the user Hovers or Focus on the Panel. So, Front face is turned away while the Back face is turned to the front. I should probably mention that I use SCSS for simplicity.

1 
.front {
2 
  transform: perspective(400px) rotateY(0);
3 
  background: var(--accent);
4 
}
5
6 
.back {
7 
  transform: perspective(400px) rotateY(179.9deg);
8 
  background: var(--code);
9 
}
10
11 
&:hover, &:focus {
12 
  .front {
13 
    transform: rotateY(-179.9deg);
14 
  }
15
16 
  .back {
17 
    transform: rotateY(0);
18 
  }
19 
}

3D with translate3d(x, y, z)

All modern devices have a CPU and a GPU (Graphical Processing Unit). The GPU's purpose is to tackle graphical rendering and remove some of the CPU tasks. What does this mean? Basically, if you use CSS3 transitions, 3D transforms, or Canvas Drawing, it would trigger GPU acceleration. Animation becomes very smooth.

Instead of using translateX(10px) use translate3d(10px, 0, 0). The result is the same, but the latter would use GPU acceleration, which improves animation.

translate3d() lets you reposition elements in 3D space

transform: translate3d(0px, 0px, 0px)
X: 0 px
Y: 0 px
Z: 0 px

Not much happens above, but let's add rotate and draw a cube with CSS using translate3d

transform: rotate3d(1, 1, 1, 40deg)
X: 1
Y: 1
Z: 1
deg: 40
1
2
3
4
5
6

Here is an example how to create a cube with CSS: MDN: CSS Perspective

CSS3 Examples

Card demo

Card demo

Book effect

Purple secret here

Skeuomorphic Button

The post is written by human and you can comment it on the Mastodon