Using type in creative ways opens up new ideas to introduce content to the user. By putting the type at a 3d angle we can use the extra space to scale up the
font-size, create layout contrast and open up space on the page.
perspective property will give us the amout of depth we want in pixels and then we can add the
transform property to rotate the element.
In this example we are going to apply a 3d angled look to the font. Hover over the type to see it in action.
First nest two div’s, the outer
div will set the
perspective for the inner
div. We can wrap the text in a
p tag in the inner
By default the nested div pivots from the center axis. So we can add
transform-origin: right; to pivot from the right end of the type.
text-align: right; and
transform: rotateY(-40deg); to pull text right and put the 3D angle on it.
Now we can do a cool hover effect to pivot toward the user by reducing the rotation degrees on hover. I also increased the scale just a little to add to the effect that the type is getting closer.
Design is continually going through transformation stages as advancements in development progress. We saw it with textures and skew metimorphis to flat design and then with jQuery and scroling animations back to simple static layouts.
We tend to over do with what technology gives us and then adjust back to find the sweet spot. Regardless it allways comes down to how the user experiences the interaction.