CODEWITHSUNDEEP
jquerycsscss-transforms
Steve
Steve

Reputation: 14922

Rotate pseudo element around its center?

I created a simple tree menu. The items that toggle use JQuery to show their children and toggle a class of "open".

I have a ":before" plus sign on the item, and when open it rotates 135 degrees to an x, see animated gif:

enter image description here

As you can see, it rotates "up". I want it to rotate around its center(which I thought was the default). Here's my code:

.nav-header {
    color: gray;
    font-weight: bold;
    font-size: 16px;
    padding-top: 10px;
    cursor: pointer;
    &:before {
        content: '+';
        font-size: 23px;
        display: inline-block;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
    &.open {
        &:before {
            -webkit-transform-origin: center center;
            -moz-transform-origin: center center;
            -ms-transform-origin: center center;
            -o-transform-origin: center center;
            transform-origin: center center;
            -webkit-transform: rotate(135deg);
            -moz-transform: rotate(135deg);
            -ms-transform: rotate(135deg);
            -o-transform: rotate(135deg);
            transform: rotate(135deg);
        }

Upvotes: 4

Views: 3070

Answers (3)

Steve
Steve

Reputation: 14922

OK, this is it now:

enter image description here

I am using a bootstrap glyphicon, added some padding on its right and shifted the center 10%:

.nav-header {
    color: gray;
    font-weight: bold;
    font-size: 16px;
    padding-top: 10px;
    cursor: pointer;
    display: inline-block;
    &:before {
        content: '\2b';
        font-family: 'Glyphicons Halflings';
        padding-right: 3px;
        font-weight: normal;
        display: inline-block;
        color: @brand-primary;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-transform-origin: 40% center;
        -moz-transform-origin: 40% center;
        -ms-transform-origin: 40% center;
        -o-transform-origin: 40% center;
        transform-origin: 40% center;
    }
    &.open {
        &:before {
            -webkit-transform: rotate(135deg);
            -moz-transform: rotate(135deg);
            -ms-transform: rotate(135deg);
            -o-transform: rotate(135deg);
            transform: rotate(135deg);
        }
    }

}

Upvotes: 1

jtheis
jtheis

Reputation: 916

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

Try transform-origin: center center;

EDIT: Need vendor-specific prefixes:

-moz-transform-origin: center center;
-webkit-transform-origin: center center;
-o-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;

EDIT 2:

Check out this fiddle to see it operating in action: http://jsfiddle.net/B226E/18/

Upvotes: 5

Gus de Boer
Gus de Boer

Reputation: 401

You can use

#element:hover { 
  -webkit-transform: rotate(360deg); 
  -moz-transform: rotate(360deg); 
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg); 
  }

Upvotes: 0

Related Questions