CSSサークルスピン/グロウントランジション、テキストの外側から開始

Question

私は、幅と高さの両方を成長させ、直立させて回転させたいサークルを持っています。問題は、組み込みのチェックマークがサークルの外で開始し、サークルで成長するのとは反対に内側にスパイラルすることがわかります。

$(function() { 
 
\t $("span").addClass("active"); 
 
})

span { 
 
\t position: absolute; 
 
\t display:block; 
 
\t color: red; 
 
\t font-size: 0px; 
 
\t font-weight: bold; 
 
\t width: 0px; 
 
\t height: 0px; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translateY(-50%) translateX(-50%); 
 
\t line-height:80px; 
 
\t text-align: center; 
 
\t background: rgba(32,167,110,0.9); 
 
\t border: 2px solid rgb(32,167,110); 
 
\t border-radius: 50%; 
 
\t -webkit-transform: rotateZ(-360deg); 
 
\t -ms-transform: rotateZ(-360deg); 
 
\t transform: rotateZ(-360sdeg); 
 
\t transition: all 5s; 
 
\t margin-left: -20px; 
 
\t margin-top:-34px; 
 
} 
 

 
span.active { 
 
\t -webkit-transform: rotateZ(0deg); 
 
\t -ms-transform: rotateZ(0deg); 
 
\t transform: rotateZ(0sdeg); 
 
\t width: 80px; 
 
\t height: 80px; 
 
\t font-size: 45px; 
 
\t margin-left: -40px; 
 
\t margin-top:-68px; 
 
}

<span>✓</span> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

それが成長するように私は円の内側中心にチェックマークを維持したいと思います。

Answer 1

あなたの質問が正しいかどうかは分かりませんが、緑の円の外にチェックマークを表示したくない場合は、CSSのプロパティoverflow: hidden;を追加できます。

EDIT：著者のコメントによれば、私は新しい解決策を追加しました。

チェックマーク記号を円の内側に配置し、それにもかかわらず円と一緒に変形する場合は、チェックマーク記号に別の要素（または擬似要素）を追加し、円に変換を割り当てるだけです。次に、擬似要素による変換の例を示します。私は私の質問を終わらなかったと思います申し訳ありません

$(function() { 
 
    $("span").addClass("active"); 
 
});

/* <div> is only for layouting (centering into the middle) */ 
 
div { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
span { 
 
    display: block; 
 
    position: relative; /* needs to be set, that the checkmark is positioned relative to the <span> */ 
 
    color: red; 
 
    font-size: 0; 
 
    font-weight: bold; 
 
    width: 0; 
 
    height: 0; 
 
    text-align: center; 
 
    background: rgba(32,167,110,0.9); 
 
    border: 2px solid rgb(32,167,110); 
 
    border-radius: 50%; 
 
    -webkit-transform: rotate(-360deg); 
 
    -ms-transform: rotate(-360deg); 
 
    transform: rotate(-360deg); 
 
    transition: all 5s; 
 
} 
 

 
span:after { 
 
    content: "✓"; 
 
    position: absolute; 
 
    transform: translate(-50%, -50%); 
 
    top: 50%; 
 
    left: 50%; 
 
} 
 

 
span.active { 
 
    -webkit-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    width: 80px; 
 
    height: 80px; 
 
    font-size: 45px; 
 
}

<div> 
 
    <span></span> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>