css從中心旋轉三角形

我想知道是否可以製作一個從中心旋轉的三角形。任何幫助，將不勝感激。 Codepen css從中心旋轉三角形

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 DrevanTonder

類似的解決方案這裏http://stackoverflow.com/questions/16771225/css3-rotate-animation – DebRaj

transform-origin屬性可用於更改變形點的原點。只需將transform-origin: 107px 111px;添加到您的.loader課程中即可。

儘管如此，您仍然需要做一些調整，才能獲得完美。

來源

2016-02-27 08:06:20

試試這個：

.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

來源

2016-02-27 07:43:32 Pedram

這不會繞着三角形的中心旋轉。 – DrevanTonder

css從中心旋轉三角形

回答

相關問題