Create Rotating 3D Letter W with CSS only

Code

Tags: , ,

CSS 3d property is a great way to create simple rotating objects.

You might have come across a CSS cube. If you have not, here is a comprehensive article by David Walsh.

After seeing the CSS cube, I wanted to apply the same technique to the letter ‘W’, so it can be displayed in 3d forms with rotation when I wanted to create a 3d animation for the ‘Web Made Well’ logo.

Let’s begin by putting HTML elements for it.

1
2
3
4
5
6
7
8

<div class="w-logo-holder">
  <div class="w-logo">
    <div class="first-left"></div>
    <div class="first-right"></div>
    <div class="second-left"></div>
    <div class="second-right"></div>
  </div>
</div>

The child elements of ‘w-logo’ will form the letter ‘W’ in 3d.
Let’s input some CSS rules to create it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

.w-logo-holder {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -100px;
  margin-left: -100px;
}
.w-logo {
  position: relative;
  width: 200px;
  margin: auto;
  transform: rotatey(60deg);
  transform-style: preserve-3d;
}
.w-logo &gt; div {
  position: absolute;
  width: 100px;
  height: 200px;
  box-sizing: border-box;
}
.w-logo &gt; .first-left {
  transform: rotate3d(1, 0, 0, -15deg) translate3d(50px, -28px, 102px);
  background-color: #373737;
}
.w-logo &gt; .first-right {
  transform: rotate3d(1, 0, 0, 15deg) translate3d(50px, 13px, 51px);
  background-color: #ffffff;
}
.w-logo &gt; .second-left {
  transform: rotate3d(1, 0, 0, -15deg) translate3d(50px, 0, 0);
  background-color: #373737;
}
.w-logo &gt; .second-right {
  transform: rotate3d(1, 0, 0, 15deg) translate3d(50px, -13px, -51px);
  background-color: #ffffff;
}
.w-logo &gt; .third-left {
  transform: rotate3d(1, 0, 0, -15deg) translate3d(50px, 28px, -102px);
  background-color: #373737;
}

There you have the letter ‘W’, but it doesn’t quite look like a 3d object yet.
To see it truly in a 3d form we need to make it rotate by adding CSS animation.

41
42
43
44
45
46
47
48

@keyframes w-rotate {
  0 {
    transform: rotatey(60deg);
  }
  100% {
    transform: rotatey(420deg);
  }
}

We have created keyframes for the animation, now let’s add these keyframes to the ‘w-logo’ element.

49
50
51

.w-logo {
  animation: w-rotate 10s linear infinite;
}

Voila! Here we have the 3d letter ‘W’ rotating 360 degrees.

You can see it in action at my CodePen page.

See the Pen 3d letter W by Web Made Well (@webmadewell) on CodePen.32161

Submit a Comment

Your email address will not be published. Required fields are marked *