我想知道是否有可能做一个完全从中心旋转的三角形。
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;
}
发布于 2016-02-27 16:06:20
transform-origin
属性可用于更改变形点的原点。只需在.loader
类中添加transform-origin: 107px 111px;
即可。
不过,您需要做一些调整,使其变得完美。
发布于 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);
}
}
https://stackoverflow.com/questions/35667118
复制相似问题