2013-08-01 2 views
6

트리거 할 때 상자가 확대되는 호버 효과가 있습니다. 내가 가진 유일한 문제는 텍스트가 변환 과정에서 흐릿해진 것처럼 보이고 '변형'될 때 다시 날카로 간다는 것입니다.CSS 변형 눈금이 흐리게 처리됩니다.

여기에 게시하기 전에 내가 연구를하기로 결정뿐만 아니라 광산의 문제가 될 것 같습니다이 게시물에 건너 온 :

How to force re-render after a WebKit 3D transform in Safari

http://duopixel.com/stack/scale.html 나는 그들의 대답을 적용했습니다

내 빌드 및 여전히 흐린 효과가 발생합니다. 나는 아래에 링크를 제공하고 누군가가 내게 조언 할 수 있다면 내가 할 수있는 것이 그것이 가능할 것이라고 판단 할 수있다! 전환 코드의

예 :

-moz-transform:scale(1.05,1.05); 

http://jsfiddle.net/VcVpM/1/

답변

1

는 폭, 높이, 왼쪽, 위, 글꼴 크기는 속성 설정, 해당 아니지만 : 크롬에 모호하지 않고 마우스를 작동 .

.cta:hover { 
    width: 500px; 
    height: 500px; 
    font-size: 400%; 
} 

유일한 다른 해결 방법 애니메이션 @keyframes를 사용하고 5 ~ 10의 상당한 금액을 설정하는 "수"는 각 키 프레임 사이에 흐리게의 수정을 강제 할 수도 있습니다.

0

enter image description here 나는 CSStricks.com에서 이걸 발견 :

그것은 당신이 또한

translate3d(0, 0, 0) 

를 사용하도록 변환을 설정하면이 문제를 해결할 수 있지만,이 글꼴 회전에 약간 흐릿하게하는 원인 않습니다 나타납니다/변환. 여기를 참조하십시오 : http://codepen.io/WillsonSmith/pen/4/2

저는 Jquery를 사용하고 슬라이더의 H3 태그를 수정해야했습니다. 큰 텍스트는 나를 위해 흐리게되지 않았습니다. 필자는이 줄을

$ ("# slider1_container") ("html")로 작성했습니다 .css ("- webkit-transform", "translate3d (0,0,0)"). -text-stroke ","0.15px ");

그리고 저에게 가장 좋은 해결책입니다. 나는 변형의 전면에 - 웹킷이 필요했다. 다른 사람들이 그것을 사용하지 않기로 한 이유는 무엇인지 모르겠습니다. 다른 설정으로 보인 방식의 이미지를 업로드했습니다.

관련 문제