Gradual italics?

Question

Is there a way to gradually transition from normal text into italics changing the slant angle ever so slightly with each character?

Answer 1

Robin's idea does work (DEMO), but there are so many things wrong with that fiddle I wasn't sure I could fit them into one comment.

First of all, span is an inline element and transform works on block elements. So you either use a block element like div or p or you set display: block on the span.

Don't use skew! Use skewX. skew was present in the early drafts and it has been removed since. It isn't even supported by Firefox 14, though it was reintroduced in Firefox 15 due to compatibility reasons and still works in Chrome, Safari and Opera.

Always put the unprefixed version last. Transforms should be unprefixed in the coming versions of Firefox, Opera and IE.

You also need a dot in front of the class name.

Something like this:

<div class="skewme">Tyrannosaurus Rex</div>

with the CSS part being simply

.skewme {
   -webkit-transform: skewX(-20deg);
      -moz-transform: skewX(-20deg);
        -o-transform: skewX(-20deg);
           transform: skewX(-20deg);
}

In order to gradually transition from the normal text to the slanted text you'll need transitions or keyframe animations.

HTML:

<div class="skewme1">Tyrannosaurus Rex</div>

CSS:

.skewme1 {
    -webkit-animation: slowskew 1.5s infinite alternate;
           -moz-animation: slowskew 1.5s infinite alternate;
             -o-animation: slowskew 1.5s infinite alternate;
                animation: slowskew 1.5s infinite alternate;
}
@-webkit-keyframes slowskew {
    to { -webkit-transform: skewX(-20deg); }
}
@-moz-keyframes slowskew {
    to { -moz-transform: skewX(-20deg); }
}
@-o-keyframes slowskew {
    to { -o-transform: skewX(-20deg); }
}
@keyframes slowskew {
    to { transform: skewX(-20deg); }
}

Answer 2

Your font may well have completely different glyphs for italics and normal text, so even morphing between them using SVG crazy-clever might look weird.

An alternative would be to apply a CSS3 2D skew transform. This won't transition between the normal and italic forms, but would just slant the normal form. This may or may not give you a visually-appealing result, depending on your font. It's also not supported in older browsers.