CSS从中心旋转三角形[重复]

Posted

技术标签:

【中文标题】CSS从中心旋转三角形[重复]【英文标题】:CSS spinning triangle from center [duplicate] 【发布时间】:2016-06-10 13:51:50 【问题描述】:

我想知道是否可以制作一个完全从中心旋转的三角形。

Codepen

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;

【问题讨论】:

类似的解决方案在这里***.com/questions/16771225/css3-rotate-animation 【参考方案1】:

试试这个:

.loader 
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
  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;

JSFiddle

【讨论】:

它不会绕着三角形的中心旋转。【参考方案2】:

transform-origin 属性可用于更改变换点的原点。只需将 transform-origin: 107px 111px; 添加到您的 .loader 课程中即可。

不过,您需要进行一些调整才能使其完美。

【讨论】:

【参考方案3】:

完整的解决方案可能类似于this。

简单地说,您应该更改与三角形实际中心匹配的transform origin(纯数学计算为 66.66%)。

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);
  

【讨论】:

以上是关于CSS从中心旋转三角形[重复]的主要内容,如果未能解决你的问题,请参考以下文章

three.js围绕边缘旋转三角形

CSS太阳月亮地球三角恋旋转效果

带有背景图像的CSS三角形[重复]

纯css做三角形图标

响应式 div 全宽底部的中心三角形

unity向量-数学-三角函数