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从中心旋转三角形[重复]的主要内容,如果未能解决你的问题,请参考以下文章