Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Italicize font the oposite direct? Re: Italicize font the oposite direct?

#125690
Mottie
Member

I just updated that [StackOverflow question with my answer](http://stackoverflow.com/a/15035402/145346)… basically I used the skew matrix from the [Mozilla docs](https://developer.mozilla.org/en-US/docs/CSS/transform#Live_examples) and ended up with [this demo](http://jsfiddle.net/Mottie/dRQaw/510/):

HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu metus nisi.
Integer non adipiscing massa. Etiam et diam magna. Mauris sit amet arcu dui, a
malesuada erat.

jQuery

// html function requires jQuery 1.4+
$(‘#skewed’).html(function (i, h) {
h = h.replace(/s+/g, ‘u00a0’).split(”);
return ‘‘ + h.join(‘‘) + ‘‘;
});

CSS

#skewed {
font: 24px Georgia, sans-serif;
background: #ccc;
padding: 10px 20px;
}
#skewed span {
display: inline-block;
/* see https://developer.mozilla.org/en-US/docs/CSS/transform */
-webkit-transform: matrix(1, 0, 0.6, 1, 8, 0);
-o-transform: matrix(1, 0, 0.6, 1, 8, 0);
transform: matrix(1, 0, 0.6, 1, 8, 0);
}