Question

所以这就是问题所在，我正在使用CSS3转换：translate（x，y）将对象从屏幕左侧转移到右边。（x轴）问题取决于屏幕分辨率，这些对象在屏幕上飞出。根据我发现的，我可以使用百分比来定义坐标，但在使用它们时，它们似乎与我使用像素测量一样。这只能使用css3吗？或者我必须用媒体查询的Javascript实现这个吗？

ps，它将1400％视为1400px，我也尝试过使用em。

$(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。

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;
}

您的特定解决方案无效，因为您只是将它们向右移动1400％，与14 * width相同。

要在页面加载时更改它，请将文档中的类准备好。

jsFiddle

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

如何在CSS3中为不同的屏幕分辨率定义x，y轴

1 个答案: