跨度位置絕對不是以頂部和左側爲中心

我想用css跨度和絕對位置創建一個「X」，但跨度不居中，即使他們應該。跨度位置絕對不是以頂部和左側爲中心

該容器有font-size的1px。和100em的height和width。因此，我可以使用1em作爲父母大小的1％。

我使用transform-origin: 0px 5em;上的跨度來旋轉它而不改變起點。元素在20％top和left（20em）開始並以80%（上和左）結束。

獲得所需要的width我簡單地計算：Square root(square of (60) * 2)（勾股定理）（60，因爲開始和結束20 - 100-20×2）

但由於某種原因，X顯然不居中。你知道我做錯了嗎？

body 
 
{ 
 
    margin: 0px; 
 
} 
 
.check 
 
{ 
 
    font-size: 1px; 
 
    position: relative; 
 
    height: 100em; 
 
    width: 100em; 
 
    background-color: white; 
 
    border-radius: 50%; 
 
    transition: .3s; 
 
    box-shadow: 0px 0px 10px red inset; 
 
} 
 

 

 

 
.check span 
 
{ 
 
    position: absolute; 
 
    display: block; 
 
    height: 10em; 
 
    width: 0px; 
 
    background-color: #00FF00; 
 
    transition:.3s; 
 
} 
 
.check.red span 
 
{ 
 
    background-color: #FF0000; 
 
    transform-origin: 0px 5em; 
 
    transform: rotate(45deg); 
 
    top: 20em; 
 
    left: 20em; 
 
} 
 
.check.red span:nth-of-type(2) 
 
{ 
 
    transform: rotate(135deg); 
 
    top: 20em; 
 
    left: 80em; 
 
} 
 

 

 

 

 

 
.check.red:hover span 
 
{ 
 
    width: 84.852813742em; 
 
}

<body> 
 
    <div class="check red"> 
 
     <span></span> 
 
     <span></span> 
 
    </div> 
 
</body>

來源

2017-10-11 Luis M.

它是在這裏，但你也使用轉換原點。一旦旋轉補償，邊緣正在下降:) –

這不是一個自動溶膠ution，但在你的CSS改變一些值我解決了這個問題：

body 
 
{ 
 
    margin: 0px; 
 
} 
 
.check 
 
{ 
 
    font-size: 1px; 
 
    position: relative; 
 
    height: 100em; 
 
    width: 100em; 
 
    background-color: white; 
 
    border-radius: 50%; 
 
    transition: .3s; 
 
    box-shadow: 0px 0px 10px red inset; 
 
} 
 

 

 

 
.check span 
 
{ 
 
    position: absolute; 
 
    display: block; 
 
    height: 10em; 
 
    width: 0px; 
 
    background-color: #00FF00; 
 
    transition:.3s; 
 
} 
 
.check.red span 
 
{ 
 
    background-color: #FF0000; 
 
    transform-origin: 0px 5em; 
 
    transform: rotate(45deg); 
 
    top: 18em; 
 
    left: 22em; 
 
} 
 
.check.red span:nth-of-type(2) 
 
{ 
 
    transform: rotate(135deg); 
 
    top: 18em; 
 
    left: 78em; 
 
} 
 

 

 

 

 

 
.check.red:hover span 
 
{ 
 
    width: 78em; 
 
}

<body> 
 
    <div class="check red"> 
 
     <span></span> 
 
     <span></span> 
 
    </div> 
 
</body>

來源

2017-10-11 11:42:43

謝謝。但爲什麼這個工作，而不是我的片段？ –

我改變了一些值，直到它看起來更好^^ 標記我的答案，如果我解決了你的問題 –

好的。但是，你能否補充說它不是一個完美的解決方案？因爲它修復了這個問題，但是在創建其他形狀的時候避免了這個問題 –

試試這個使用margin-top:-0.5rem;

.check span 
{ 
    position: absolute; 
    display: block; 
    height: 10em; 
    width: 0px; 
    background-color: #00FF00; 
    transition:.3s; margin-top:-0.5rem; 
}

body 
 
{ 
 
    margin: 0px; 
 
} 
 
.check 
 
{ 
 
    font-size: 1px; 
 
    position: relative; 
 
    height: 100em; 
 
    width: 100em; 
 
    background-color: white; 
 
    border-radius: 50%; 
 
    transition: .3s; 
 
    box-shadow: 0px 0px 10px red inset; 
 
    
 
} 
 

 

 

 
.check span 
 
{ 
 
    position: absolute; 
 
    display: block; 
 
    height: 10em; 
 
    width: 0px; 
 
    background-color: #00FF00; 
 
    transition:.3s; margin-top:-0.5rem; 
 
} 
 
.check.red span 
 
{ 
 
    background-color: #FF0000; 
 
    transform-origin: 0px 5em; 
 
    transform: rotate(45deg); 
 
    top: 20em; 
 
    left: 20em; 
 
} 
 
.check.red span:nth-of-type(2) 
 
{ 
 
    transform: rotate(135deg); 
 
    top: 20em; 
 
    left: 80em; 
 
} 
 

 

 

 

 

 
.check.red:hover span 
 
{ 
 
    width: 84.852813742em; 
 
}

<body> 
 
    <div class="check red"> 
 
     <span></span> 
 
     <span></span> 
 
    </div> 
 
</body>

來源

2017-10-11 11:41:40 core114

這仍然不居中 –

你是什麼意思居中？ – core114

跨度元素和父邊框之間的距離。在你的代碼片段上，距離最短的路程。（至少在Firefox和鉻） –

有幾件事情可以做，使生活在這裏更容易。

首先你可以用百分比來轉換原點，這意味着你不需要自己計算它。
您也可以使用百分比進行定位，然後使用變換進行偏移（再次以百分比形式）以居中，而不管大小。
您還可以使用百分比來設置十字的寬度，該百分比將從其父項大小中選擇。

更新：通過使用背景漸變將十字架更改爲從頂部而非中心的動畫。

.check 
 
{ 
 
    position: relative; 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: white; 
 
    border-radius: 50%; 
 
    box-shadow: 0px 0px 10px red inset; 
 
} 
 

 
.check span 
 
{ 
 
    position: absolute; 
 
    display: block; 
 
    height: 20px; 
 
    width: 0%; 
 
    background: linear-gradient(to right, white 50%, red 50%); 
 
    background-size: 200% 100%; 
 
    background-position: left bottom; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform-origin: center; 
 
    transition: background 0.3s ease; 
 
} 
 
.check.red span 
 
{ 
 
    transform: translate(-50%, -50%) rotate(-45deg); 
 
} 
 

 
.check.red span:last-child 
 
{ 
 
    transform: translate(-50%, -50%) rotate(-135deg); 
 
} 
 

 
.check.red:hover span 
 
{ 
 
    background-position: right bottom; 
 
    width: 70%; 
 
}

<div class="check red"> 
 
    <span></span> 
 
    <span></span> 
 
</div>

來源

2017-10-11 11:53:02 Martin

但是，是否也可以讓動畫更像是有人寫X的？原來我的第二個span有'.3s'延遲。這樣看起來好像有人寫了兩行（都是從上面開始）創建一個X（你的動畫從中心開始） –

我已經更新了答案以反映從頂部，而不是中心。 – Martin

跨度位置絕對不是以頂部和左側爲中心

回答

相關問題