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

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/

Answer 2

好的，现在就是这样：

我正在使用一个bootstrap glyphicon，在其右侧添加了一些填充并将中心移动了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

您可以使用

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