Rotate a pseudo-element around its center?

Question

I created a simple tree. Elements that switch jQuery to display their children and switch the "open" class.

I have a ": before" plus sign, and when it is open, it rotates 135 degrees x, see animated gif:

As you can see, it rotates up. I want it to revolve around its center (which, in my opinion, was the default). Here is 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);
        }

Answer 1

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:

, , : http://jsfiddle.net/B226E/18/

Answer 2

, :

-, 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);
        }
    }

}

Answer 3

you can use

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