다른 화면 해상도를 위해 CSS3에서 x, y 축을 정의하는 방법

Question

여기에 문제가 있습니다. CSS3 변환을 사용하고 있습니다 : 화면의 왼쪽에서 오른쪽으로 객체를 전환하려면 translate (x, y)를 사용하고 있습니다. (x 축) 문제는 화면 해상도에 따라 다르며,이 물체는 화면에서 벗어납니다. 내가 찾은 바에 따르면 좌표를 정의하는 데 백분율을 사용할 수 있지만 좌표를 사용하면 픽셀 측정을 사용했을 때와 똑같이 작동하는 것처럼 보입니다. 이것은 css3을 사용하는 것만 가능합니까? 아니면 미디어 쿼리의 Javascript로이를 구현해야합니까?

ps, ​​1400 %를 1400px로 처리하면 필자도 시도해 보았습니다.

$(window).load(function() { 


    $('#second').css({ 
     webkitTransform : 'translate(1400%,0)', 
    mozTransform : 'translate(1400%, 0)', 
    msTransform : 'translate(1400%, 0)', 
    oTransform : 'translate(1400%, 0)', 
    transform : 'translate(1400%, 0)', 
    transition: 'all 1.25s ease-in-out' 


    }); 


$('#first').css({ 
     webkitTransform : 'translate(1400%,0)', 
    mozTransform : 'translate(1400%, 0)', 
    msTransform : 'translate(1400%, 0)', 
    oTransform : 'translate(1400%, 0)', 
    transform : 'translate(1400%, 0)', 
    transition: 'all 1.75s ease-in-out' 

    }); 

$('#third').css({ 
    webkitTransform : 'translate(1400%,0)', 
    mozTransform : 'translate(1400%, 0)', 
    msTransform : 'translate(1400%, 0)', 
    oTransform : 'translate(1400%, 0)', 
    transform : 'translate(1400%, 0)', 
    transition: 'all .75s ease-in-out' 


    }); 

Answer 1

당신은 절대적으로 그 위치를 다음 left 및 margin-left에 전환 할 수 있습니다. 방금 14 * width과 동일한 권리에 1400 %가 이동하고 있기 때문에

jsFiddle

는

#trans { 
    position:absolute; 
    top:50px; 
    left:0%; 
    width:50px; 
    height:50px; 
    background-color:#00F; 
    -moz-transition:all 2s ease; 
    -webkit-transition:all 2s ease; 
    transition:all 2s ease; 
} 

#trans.toggle { 
    left:100%; 
    margin-left:-50px; 
} 

귀하의 특정 솔루션이 작동하지 않습니다.

페이지로드시 변경하려면 문서 준비에 클래스를 넣습니다.

$(document).ready(function() { 
    $('#trans').addClass('toggle'); 
});