我的项目中有这样的代码:

null

body {
  background-color: #312a50;
  font-family: Helvetica Neue;
  color: white;
}

html,
body {
  height: 100%;
}

.main {
  height: 100%;
  width: 100%;
  display: table;
}

.wrapper {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}

.t1 {
  width: 0;
  height: 0;
  margin: auto;
  border-right: 50px solid transparent;
  border-bottom: 86.6px solid blue;
  border-left: 50px solid transparent;
}

@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

<div class="main">
  <div style="text-align: center;" class="wrapper">
    <div class="t1 rotating"></div>
  </div>
</div>

null

我的三角形目前旋转得很好，而且速度正确，但是它不是在三角形的中心点旋转。 它似乎是从一个稍微偏离中心的点旋转的。

还有，我如何只显示三角形的边框而不显示完整的实心蓝色？

任何帮助都将不胜感激！

谢谢！