在其中心周围旋转伪元素？

Question

我创建了一个简单的树菜单.切换的项目使用JQuery来显示他们的孩子并切换一个"开放"类.

我在项目上有一个":before"加号,打开时它会旋转135度到x,看动画gif:

如你所见,它会"向上"旋转.我希望它围绕它的中心旋转(我认为这是默认值).这是我的代码:

.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

尝试 transform-origin: center center;

编辑:需要供应商特定的前缀:

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

编辑2:

看看这个小提琴,看看它在运作:http://jsfiddle.net/B226E/18/