Grow your CSS skills. Land your dream job.

Rotate div background not text

  • # June 5, 2013 at 4:48 am

    i have created div and rotation is done.. i want to rotate only back ground image ,div text should not rotate ??

    how to do this

    Fiddle::

    http://jsfiddle.net/simmi_simmi123/sesZv/3/

    # June 5, 2013 at 5:06 am

    I’d think you would have to wrap the text in an element and rotate it back the other way.

    # June 5, 2013 at 5:15 am

    Hi Simmi

    Just see on code jsfiddle:http://jsfiddle.net/simmi_simmi123/sesZv/3/

    # June 5, 2013 at 5:17 am

    This might work:

    [Link](http://cdpn.io/BpwvH “link”)

    I’ve transform the box to scale -1, 1 and in the same time I scale the text (in the span) in the opposite way.

    # June 5, 2013 at 5:29 am

    @simmi
    here is link: http://jsfiddle.net/sesZv/18/

    # June 5, 2013 at 6:53 am

    @adahei i want image and text in same div , i want to use only 1 div

    # June 5, 2013 at 7:04 am

    Works fine with a bg image: http://codepen.io/Paulie-D/pen/ahpsD

    # June 5, 2013 at 8:41 am

    @Paulie_D i need div containig bg image and text . i cant place span inside div

    # June 5, 2013 at 8:45 am

    All text should be wrapped in in some sort of text tag such as a p or span. I don’t understand why you can’t add this.

    # June 5, 2013 at 9:22 am

    I’d go further and state that text should _not_ be wrapped in **solely** div _and/or_ span. Neither have any semantic value whatsoever – even if classed.

    # June 5, 2013 at 9:44 am

    >I’d go further and state that text should not be wrapped in solely div and/or span. Neither have any semantic value whatsoever – even if classed.

    This was my point but I was on on my phone and couldn’t expand further.

    At a minimum **raw** text should be in a `p` tag unless wrapped in a anchor link of course and even then it’s not a bad idea.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".