CSS如何从中心旋转三角形?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (153)

我想知道是否有可能制作一个三角形,从中心完全旋转?

HTML:

<div class="loader-wrapper">
    <div class="loader"></div>
</div> 

CSS:

.loader-wrapper {
  width: 100%;
  height: 100vh;
  background-color: #11e;
}

@keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 173.2px 100px;
  border-color: transparent transparent #007bff transparent;
  animation: 4s linear 0s infinite load;
}
提问于
用户回答回答于

transform-origin属性可用于更改转换点的原点。只需添加transform-origin: 107px 111px;到你的.loader类。

用户回答回答于

应该改变与三角形的实际中心相匹配的变换原点(这是纯数学的内容)。

HTML:

<div class="loader">
    <div class="loader-wrapper">
        <div class="triangle"></div>
    </div>
</div>

CSS:

.loader {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 300px;
}

.loader-wrapper {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  /* transform by half of its width & height */
  transform: translate(-50%, -50%);
}

.triangle {
  display: block;
  position: relative;
  width: 0;
  height: 0;
  border-color: transparent transparent #e44750 transparent;
  border-width: 0px 100px 173.20508076px 100px;
  border-style: solid;
  transform-origin: 50% 66.66%;
  animation: spin 3s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

扫码关注云+社区

领取腾讯云代金券