translate (x, y, z)의 백분율 값이 작동하지 않습니다.

2D 번역을 사용하여 애니메이션을 만들었습니다. 하지만 하드웨어 가속을 적용하여 translate3d()을 사용하고 싶습니다. translate (x, y, z)의 백분율 값이 작동하지 않습니다.

.hand { 
    position:fixed; 
    top:-60%; 
    left:50%; 
    width:20%; 
    margin-left:-10%; 
} 

.handmovedown { 
    transform: translate3d(0%,110%,0%); 
    -webkit-transform: translate3d(0%,110%,0%); /** Safari & Chrome **/ 
    -o-transform: translate3d(0%,110%,0%);/** Opera **/ 
} 

.objecttransition { 
    transition: all 0.5s linear; 
    -webkit-transition: all 0.5s linear; /** Chrome & Safari **/ 
    -moz-transition: all 0.5s linear; /** Firefox **/ 
    -o-transition: all 0.5s linear; /** Opera **/ 
}

HTML :

<img id='Hand' class="hand objecttransition" src="css/images/hand.gif">

JS : 여기 내 CSS입니다 난 그냥 번역에 사용되는 CSS 지금

$(document).ready(function(){ 
    $("#Hand").addClass("handmovedown"); 
});

(0 %, 110 %) 다 잘 했어. 왜 브라우저의 dev 도구가 오류를 집어 들지 않는지 모르겠다.

출처

2014-01-17 user481610

as Mozilla Developer Networks.

^TZ 는이 병진 벡터의 Z 성분을 나타내는입니다. <percentage> 값일 수 없습니다. 이 경우 변형을 포함하는 속성이 유효하지 않은 것으로 간주됩니다.

Demo(사용 px)

출처

2014-01-17 10:04:17

다른 화면 크기를 어떻게 처리할까요? px를 사용하는 것은 다른 장치에서 다른 위치 지정을 의미합니다. 다양한 모바일 장치 화면에 맞게 애니메이션을 제작하려면 어떻게해야합니까? – user481610

@Roberto jQuery를 사용하여 'position : absolute;'객체를 만들고, .animate()를 사용하여 요소의 위치를 미세 조정하여 객체를 애니메이션합니다. –

답장을 보내 주셔서 감사합니다. 내가 .nimate를 사용하고 싶지 않은 이유는 이것이 phonegap 응용 프로그램이어야하고 .animate()가 phonegap에서 잘 작동하지 않기 때문입니다. – user481610

당신이 당신의 의견에 응답에 대한 요구되기 때문에, 그 방법이있을 것입니다 :

많은 지원 (실제 작업 지원)가 없지만 vh를 사용할 수 있어야합니다 :

transform: translate3d(10%,20%,50vh);

바로 지금, FF로 처리 할 수 있습니다. 크롬에서는 사용할 수 있지만 (중단되지는 않음) 확인하지 않습니다.

출처

2014-01-17 15:37:13 vals

답변 해 주셔서 감사합니다. 나는 이것을 읽어 들일 것이다! – user481610

translate (x, y, z)의 백분율 값이 작동하지 않습니다.

답변

관련 문제