logo标签列表

如何让伪元素围绕其中心旋转？

jquerycsscss-transforms
4
我创建了一个简单的树形菜单。使用 JQuery 来显示它们的子菜单，并切换“open”类。在该项前面有一个加号“:before”，当打开时，该符号会旋转135度成为x，如下动画图所示：

enter image description here

如你所见，它是“向上”旋转的。我希望它围绕其中心旋转（我认为这是默认值）。以下是我的代码：
.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);
        }
1
你尝试过使用 transform-origin: center center; 吗？ - apohl
只是一个猜测，不如在这里使用 middle middle：transform-origin: middle right;。 - krowe
是的，尝试过居中对齐、50% 50%等方式。 - Steve
3个回答
5
首先尝试了那个，得到了上面的结果。 - Steve
看看我发给你的链接。似乎各种浏览器都需要一些特定于供应商的前缀。我也更新了我的答案。 - jtheis
此外，我认为在您的情况下这并不重要，因为X很小，但是在元素旋转之前，页面的其余部分的布局已经确定，因此如果它很大和/或形状奇怪，它可能会与其他元素重叠。 - jtheis
我已经添加了一个 jsfiddle，看起来我们需要更多的信息。由于样式在我的例子中按照广告运行，因此您的html/css/js有些问题，因为它们正在干扰着其他事情。编辑：有一个想法：在浏览器（我认为是Chrome和IE中的F12）中使用DOM检查器，然后查看:before元素是否由于您的展开逻辑而移动。可能是它绕其中心旋转，但其他东西正在移动中心。 - jtheis
我的工作方式和你的一样。我认为只是“加号”看起来的方式不同。我最终使用了一个glyphicon。 - Steve
1
好的，现在是这样的：

OK，就是这样：

enter image description here

我正在使用Bootstrap的图标，对其右侧进行了一些填充，并将中心向右移动了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);
        }
    }

}
0

您可以使用

#element:hover { 
  -webkit-transform: rotate(360deg); 
  -moz-transform: rotate(360deg); 
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg); 
  }
我试图将“+”变成“x”。 - Steve
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接