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>

围绕中心点CSS旋转三角形

1 个答案: