Forums

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

Home Forums CSS Need help vertically centering a rotated element

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #166708
    cm123077
    Participant

    Here is the page – NSFW! http://multianglexxx.com

    Near the bottom of the page, you will see an FAQ section. If you click on the first heading – “Tyrannosaurus Rex” you will notice that the arrow to the left rotates 90 degrees, but once rotated, it sits higher than the heading. I have tried, in vain, to center this arrow vertically so it is even with the heading once it is rotated. Everything I try also affects the heading, or does not work at all. Can someone please help me figure out the code I need to make this work correctly?

    Here is an example that works perfectly. This is how I want mine to look – http://kck.st/Z1HJRR (scroll down to the FAQ section)

    Thanks!

    Here is the code:

    HTML
    <label for=”panel1″>Tyrannosaurus Rex</label>

    CSS
    #panel1:checked + label span.arrowRotate {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    color:#76CC1E;
    }

    .arrowRotate {
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    }

    #166735
    cm123077
    Participant

    hmmmm this must be more difficult than I thought :)

    #166747
    Paulie_D
    Member

    Could you make a Codepen.io example?

    #166754
    Paulie_D
    Member

    Never mind: I had a play : http://codepen.io/Paulie-D/pen/Cxmdc/

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.