jquery - 如何使用css和jquery将 "triangle down"旋转到 "triangle up"

Question

我有以下三 Angular 形

由以下 css 创建:

.triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #cecece;
    margin-left: -10px;

}

html:

<div class=triangle></div>

当我点击三 Angular 形时，我希望它旋转并变成朝上的三 Angular 形。你能指导我如何实现这一点吗？

这是尝试三 Angular 形向上的代码

.triangle-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #555;
    margin-left: -10px;
}

我不确定当单击向下三 Angular 形到向上三 Angular 形时如何让它旋转，然后当单击向上三 Angular 形时它必须旋转回向下三 Angular 形

Answer 1

您可以使用toggleClass()和transform来旋转箭头

$(".triangle").click(function() {
  $(this).toggleClass("triangle-up");

})

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-top: 80px solid red;
  transition: all .5s;
}

.triangle-up {
 transform:rotateX(180deg);
 margin-top:-50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="triangle"></div>