切换引导程序 3 面板时如何为 V 形字形图标设置动画？

Question

我有一个包裹在 bootstrap 3 手风琴中的面板的工作解决方案。

如何通过 90 度旋转将 V 形状态从“>”更改为“^”？

.panel-heading .accordion-toggle:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    color: grey;
}

.panel-heading .accordion-toggle.collapsed:after {
    content: "\e080";
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#importationCollapse">Importation</a>
            </h3>
        </div>
        <div id="importationCollapse" class="panel-collapse collapse in">
            <div class="panel-body">
            <p>Content: blahblah</p>
            </div>
        </div>
    </div>
</div>

[编辑] 我正在寻找平滑的旋转，我已经如何更改 V 形状态。

Answer 1

你可以简单地更换

.panel-heading .accordion-toggle.collapsed:after {
    content: "\e080";
}

与以下

.panel-heading .accordion-toggle.collapsed:after {
    transform: rotateX(180deg);
}

这应该可以解决问题，而不是使用另一个角色。 Codepen 上的演示

要为旋转设置动画，您可以添加以下内容

.panel-heading .accordion-toggle:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    color: grey;
    transition: transform 0.5s;
    transform-origin: 8px 7px;
}

并沿Z轴旋转

.panel-heading .accordion-toggle.collapsed:after {
    transform: rotateZ(180deg);
}

您可以尝试使用transform-origin来获得所需的结果。

Codepen 上的演示