Rotate element without rotating images!

[MajinSaha]

Hi all! I'm relatively new to CSS programming and stuck with some problem. I searched the web and found nothing that could help me. I have an element that contains both text and an image *.png. I want to transform the element a little bit to make the text and its flow diagonal but I do NOT want to rotate picture. What I have is something like this

myelement{width:132px; height:100px; padding:24px 0 0 48px; vertical-align:bottom; background:url(images/pic.png) no-repeat 0 100%;}

If I add

transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-moz-transform:skew(-20deg,0deg); /* Firefox */

to it, it rotates as a whole! I don't need it. If you want to put all the properties inside one element, don't bother answering. The web is overfilled with this kind of advice and is intended to rotate images. Thanks to all who replies!

[Morgs Morgan]

MajinSaha wrote:

If you want to put all the properties inside one element, don't bother answering.

Please never restrict people from giving an answer closer to their understanding, if i were me i would simply get put off :( in answering this question! Anyway, one known way to add different styling to elements is basically to use different class names on such elements or carefully put inline styling on the element itself. I'm assuming that you have:

This is the text you would like to transform!

Above you have a "div" with a background image and a "p" inside a "div". To transform the text inside the "p" alone, simply add your transformation css effects to the extra class i put in place on the "p" which is: "txtTransform" like so:

.txtTransform
{
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-moz-transform:skew(-20deg,0deg); /* Firefox */
}

That's the basic way to separate css effects, using different class names for general and specific elements. Happy coding, Morgs