CSS从中心开始旋转三角形
CSS从中心开始旋转三角形
提问于 2016-02-27 15:41:27
我想知道是否有可能做一个完全从中心旋转的三角形。
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;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2016-02-27 16:06:20
transform-origin属性可用于更改变形点的原点。只需在.loader类中添加transform-origin: 107px 111px;即可。
不过，您需要做一些调整，使其变得完美。
Stack Overflow用户
发布于 2018-06-02 03:29:43
一个完整的解决方案可能类似于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);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35667118
复制相关文章
相似问题