Html 如何旋转跨距中的文本，使其围绕其中心而不是右角旋转

我有一个常见问题部分。每个问题前面都有一个绿色三角形，如下所示：

单击绿色三角形将三角形旋转90度。但是，它不会围绕三角形的中心旋转。相反，它会绕右角旋转。看看它是如何因此向右移动的

我尝试过tansform origin，但它似乎移动中心太远，即使我使用%

以下是HTML：

    <div class="question-container">
        <div class="question">
        <p><span class="triangle">▸</span> Why choose ProveWord?</p>
        </div><!--question -->
        <div class="answer">
            <p>ProvenWord does all that is necessary to make your work its best. That is why we always perform proofreading andediting on your document.</p>
        </div><!-- answer -->
    </div><!-- question-container -->

以下是JS：

$('.triangle').on('click', function(){

    var self = $(this).closest('.question-container').find('.answer');
    vis  = $('.answer').not(self).filter(':visible');

        if (vis.length) {
        vis.slideUp(function() {
            vis.closest('.question-container').find('.triangle').toggleClass('rotate');
            self.slideToggle('slow');

        });
    }else{
        self.slideToggle('slow');        
    }
    $(this).toggleClass('rotate');  
});

---

我是一个有CSS和旋转的NOOB。非常感谢您的帮助。

下面是我将如何使用一点JavaScript来完成这项工作 我在您的

JavaScript上创建了一个按钮，在单击时获取事件，并将类rotate添加到三角形元素中。再次单击它将删除该类，它将再次变为绿色

HTML:

<a href="#" id="button">
      <div class="question">
        <p><span class="triangle">▸</span> Why choose ProveWord?</p>
      </div>
</a><!--question -->

JavaScript:

$("#button").click(function() {
    $(".triangle").toggleClass('rotate');
});

---

@Theo的答案很好，但你应该知道，你可以通过（至少）两种其他方式获得类似的结果：

如果没有JavaScript：（您必须将复选框重新设置为所需的箭头）

input~p{
显示：无；
}
输入：选中~p{
显示：块；
}

wesh

DFSF
DFSF
DFSF
DFSF
DFSF
DFSF

感谢您的回复。我看到你的三角形绕着它的中心旋转。我的代码可以很好地旋转三角形，但是它是围绕三角形的右点而不是中心旋转的。我想保留我的代码并理解如何正确工作。您已将左填充设置为8px，右填充设置为12px，对象的中心向右偏移。使其均匀，并从两侧（或顶部/底部）以小增量进行调整，直到您满意为止。甚至可以对rotate类应用特定的填充。

.triangle {
  font-size: 18px;
  color: #608b32;
  padding: 0 8px 0 12px;
  display: inline-block;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.triangle.rotate {
  color: red;
  -webkit-transform:rotate(90deg); 
  -ms-transform:rotate(90deg);
}

$("#button").click(function() {
    $(".triangle").toggleClass('rotate');
});