CSSトランスフォームからのぼかしを防ぐには？

Question

私はCSSのズーム機能を使用していくつかの問題があります。要素をズームインすると、イメージではなくてもちょっとぼやけてしまいます。単純なテキスト要素です。

私はHover.cssのコードを使用してコード内にdivを作成しています。しかし、あなたがHover.cssで見ることができるように、あなたが「成長する」の上にマウスを置くと、それはあまりにもぼやけてしまいます。

http://ianlunn.github.io/Hover/

CSSコード：

.hvr-grow { 
    display: inline-block; 
    vertical-align: middle; 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    -webkit-transition-property: transform; 
    transition-property: transform; 
} 
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
} 

どのように可能なこの上記の例のような要素を育てますが、以前のように、すべてがシャープにするということですか？

Answer 1

あなたは要素のサイズを増やすことができます1未満のような.5、 1）hover/focus/activeまたはいずれかのイベントでは、拡大縮小したい場合は、ぼかし効果を防ぐために縮尺ではなく要素サイズを大きくする必要があります。 https://jsfiddle.net/qb2Lhtz9/11/

.hvr-grow { 
 
    position: absolute; 
 
    top: 10%; 
 
    left: 10%; 
 
    display: inline-block; 
 
    -webkit-transform: translateZ(0); 
 
    transform: scale(.5) translateZ(0) translateX(-10%) translateY(-10%); 
 
    font-size: 100px; 
 
    -webkit-transition: transform 400ms; 
 
    transition: transform 400ms; 
 
} 
 
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { 
 
    transform: scale(1) 
 
}

<a href="#" class="hvr-grow">Grow</a>

Answer 2

デフォルトでは、要素の縮尺を小さくすることを検討しましたか。ホバリング/アクティブ時に1にスケーリングしますか？その後、

CSSあなたは何ができるか

.hvr-grow { 
    display: inline-block; 
    vertical-align: middle; 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    -webkit-transition-property: transform; 
    transition-property: transform; 

    -webkit-transform: scale(0.9); 
    transform: scale(0.9); 
} 

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { 
    -webkit-transform: scale(1); 
    transform: scale(1); 
} 

Answer 3

、ここで示唆したように、あなたは最初のホバー上のように大きなとしての要素を作り、transform: scale(1, 1);

にホバースイッチ規模の transform: scale(.5, .5);、その後のような初期サイズにスケールダウン

あなたは、これはクロムでぼかしを修正しているようだ、この-webkit-transform: perspective(1px) scale(1.1); transform: perspective(1px) scale(1.1);のようにスケールする（1ピクセル）-webkit-backface-visibility: hidden; backface-visibility: hidden;を削除し、視点を追加する必要があります。ここでは例がありますhttps://jsfiddle.net/qb2Lhtz9/9/それは完璧ではありませんが、私はそれが助けることを願っています..