CSSホバー回転：ぼかしと奇妙なテキスト

私は内部のテキストを持ついくつかの円を持っています。私が回転させるためにその上を移動すると、回転が終了するまでテキストがぼやけて少し乱雑になります。だからそれはうまくいく。それはすべてのブラウザで起こっています。CSSホバー回転：ぼかしと奇妙なテキスト

this oneのような回答をいくつか試しましたが、うまくいきませんでした。サブピクセル値を計算する際

HTML

<div class="circle"> 
    <div class="inner-circle"> 
     <div class="dotted-circle"> 
      <div class="circle__wrapper"> 
       <div class="circle__content"> 
        Magic Touch Detox 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS

.treatframe .circle { 
    position: relative; 
    display: block; 
    margin-top: -6em; 
    background-color: transparent; 
    color: #222; 
    text-align: center; 
    z-index: 1; 
} 

.circle:after { 
    display: block; 
    margin-left: auto !important; 
    margin-right: auto !important; 
    width: 170px; 
    height: 170px; 
    border-radius: 50%; 
    background-color: #c6c; 
    content: ""; 
} 

.dotted-circle { 
    display: block; 
    margin-left: auto !important; 
    margin-right: auto !important; 
    margin-top: 5px; 
    width: 160px; 
    height: 160px; 
    border: 5px dotted #fff; 
    border-radius: 50%; 
    background-color: #c6c; 
} 

.treatframe .circle .inner-circle { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 1; 
    -webkit-transition-duration: 1s; 
    -moz-transition-duration: 1s; 
    -o-transition-duration: 1s; 
    transition-duration: 1s; 
} 

.treatframe .circle .inner-circle:hover { 
    -webkit-transform: rotate(7deg);/* Chrome, Safari, Opera */ 
    -moz-transform: rotate(7deg); 
    -o-transform: rotate(7deg); 
    -ms-transform: rotate(7deg);/* IE 9 */ 
    transform: rotate(7deg); 
    -webkit-transition-duration: 1s; 
    -moz-transition-duration: 1s; 
    -o-transition-duration: 1s; 
    transition-duration: 1s; 
} 

.circle__wrapper { 
display: table; 
width: 100%; 
height: 100%; 
} 

.circle__content { 
    display: table-cell; 
    padding: 1em; 
    vertical-align: middle; 
    font-size: 20px; 
    font-weight: bold; 
    color: #fff; 
}

出典

2017-01-03 ma.gr

CSSのトランスフォームは、多くの場合、ぼけの原因となります、それは獣のちょうど自然です。

一つの解決策は、私はちょうど私のMBP網膜/クローム55と試みたコンテナ

.circle { 
 
    position: relative; 
 
    display: block; 
 
    margin-top: -6em; 
 
    background-color: transparent; 
 
    color: #222; 
 
    text-align: center; 
 
    z-index: 1; 
 
} 
 

 
.circle:after { 
 
    display: block; 
 
    margin-left: auto !important; 
 
    margin-right: auto !important; 
 
    width: 170px; 
 
    height: 170px; 
 
    border-radius: 50%; 
 
    background-color: #c6c; 
 
    content: ""; 
 
} 
 

 
.dotted-circle { 
 
    display: block; 
 
    margin-left: auto !important; 
 
    margin-right: auto !important; 
 
    margin-top: 5px; 
 
    width: 160px; 
 
    height: 160px; 
 
    border: 5px dotted #fff; 
 
    border-radius: 50%; 
 
    background-color: #c6c; 
 
} 
 

 
.circle .inner-circle { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 1; 
 
    -webkit-transition-duration: 1s; 
 
    -moz-transition-duration: 1s; 
 
    -o-transition-duration: 1s; 
 
    transition-duration: 1s; 
 
} 
 

 
.circle .inner-circle:hover { 
 
    -webkit-transform: rotate(7deg);/* Chrome, Safari, Opera */ 
 
    -moz-transform: rotate(7deg); 
 
    -o-transform: rotate(7deg); 
 
    -ms-transform: rotate(7deg);/* IE 9 */ 
 
    transform: rotate(7deg); 
 
    -webkit-transition-duration: 1s; 
 
    -moz-transition-duration: 1s; 
 
    -o-transition-duration: 1s; 
 
    transition-duration: 1s; 
 
} 
 

 
.circle__wrapper { 
 
display: table; 
 
width: 100%; 
 
height: 100%; 
 
} 
 

 
.circle__content { 
 
    backface-visibility: hidden; 
 
    display: table-cell; 
 
    padding: 1em; 
 
    vertical-align: middle; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    color: #fff; 
 
}

<html> 
 
<head> 
 
</head> 
 
<body> 
 
<div class="circle"> 
 
    <div class="inner-circle"> 
 
     <div class="dotted-circle"> 
 
      <div class="circle__wrapper"> 
 
       <div class="circle__content"> 
 
        Magic Touch Detox 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

出典

2017-01-03 17:25:33

これは、私が考える質問に対する答えではありません。「回転させるためにマウスの上を移動すると、テキストがぼやけて、回転が終了するまでちょっと混乱します。 – LukyVj

同じことです。あなたのスニペットも同じになります。 –

今すぐチェックする 'backface-visibility：hidden;'トリックを行う。 –

に視点と背面視認性の値を追加することで、すべてが私の側で正常に見えます。

どのようなセットアップ/設定がありますか？

出典

2017-01-03 17:28:11 LukyVj

CSSホバー回転：ぼかしと奇妙なテキスト

答えて

関連する問題