围绕中心点 CSS 旋转三角形

Question

我的项目中有这段代码：

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>

我的三角形目前旋转得很好，速度合适，但它没有在三角形的中心点旋转。它似乎从稍微偏离中心的一点开始旋转。

另外，如何仅显示三角形的边框而不显示完整的纯蓝色？

任何帮助将不胜感激！

谢谢！

Answer 1

您需要将转换原点调整为50% 66%

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;
transform-origin: 50% 66%;
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotating {
animation: rotating 2s linear infinite;
}

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