私の「変換」はなぜ機能しないのですか？

Question

.rotate { 
 
    display: block; 
 
    width: 64px; 
 
    height: 64px; 
 
    border: 2px black dashed; 
 
    animation: rotate 40s linear infinite; 
 
    border-radius: 50%; 
 
    transform: scale(1.8); 
 
    position: relative; 
 
    top: 50px; 
 
    left: 50px; 
 
} 
 

 
@keyframes rotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="rotate"></div>

あなたがフィドルを見ている場合、 "変換：スケールを（1.8）;"うまくいかなかった。国境を拡大するための他の選択肢はありますか？

Answer 1

あなたは行き​​ます。あなたが最初の回転クラスでスケールしようとしているときに変換が機能していないのは、回転するアニメーションのために徐々に変化するからです。幅や高さを最初に修正したり、サイズを変更したり、境界線のサイズを変更したりする必要があります。

.rotate { 
 
\t display: block; 
 
\t width: 115px; 
 
\t height: 115px; 
 
\t border: 4px black dashed; 
 
\t animation: rotate 40s linear infinite; 
 
\t border-radius: 50%; 
 
    position: relative; 
 
    top: 50px; 
 
    left: 50px; 
 
} 
 

 
@keyframes rotate { 
 
    0% { 
 
    transform: rotate(0deg);} 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="rotate"></div>

Answer 2

ないようにハード本当に。高さと幅を手動で大きくし、境界線の幅を広げます。

.rotate { 
 
    display: block; 
 
    width: 115px; 
 
    height: 115px; 
 
    border: 4px black dashed; 
 
    animation: rotate 40s linear infinite; 
 
    border-radius: 50%; 
 
    position: relative; 
 
    top: 50px; 
 
    left: 50px; 
 
} 
 

 
@keyframes rotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="rotate"></div>