Create Rotating 3D Letter W with CSS only
Categories: Code
Tags: Animation, CSS, Experiment, Typography

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 > div { position: absolute; width: 100px; height: 200px; box-sizing: border-box; } .w-logo > .first-left { transform: rotate3d(1, 0, 0, -15deg) translate3d(50px, -28px, 102px); background-color: #373737; } .w-logo > .first-right { transform: rotate3d(1, 0, 0, 15deg) translate3d(50px, 13px, 51px); background-color: #ffffff; } .w-logo > .second-left { transform: rotate3d(1, 0, 0, -15deg) translate3d(50px, 0, 0); background-color: #373737; } .w-logo > .second-right { transform: rotate3d(1, 0, 0, 15deg) translate3d(50px, -13px, -51px); background-color: #ffffff; } .w-logo > .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 WebMadeWell (@webmadewell) on CodePen.