如何使用CSS移动对象？ [英] How to make objects move with CSS?

问题描述

我在页面中间并排放置了两个图像（对象），我希望它们彼此相对移动，好像它们会碰撞并停下来一样，因为它们被放置在每个图像旁边。

I have two images (objects) set side by side in the middle of the page and I want them to move toward each other as if they are going to collide and stop as they are placed beside each one.

因此，对于右侧的对象，我编写了以下代码，认为该对象应从左向右移动，但结果与我的预期相去甚远。是否可以通过过渡来实现？我想要的是，其中一个对象从左侧开始移动，另一个对象从右侧开始移动，并在中心相遇，好像它们要碰撞一样。

So, for the object at the right side I have written the following code, thinking that the object should move from left to right, but the result is far from what I expect. Is it possible to do it by transition? what I want is that one of the objects start moving from left side and the other start moving from the right and meet at the center as if they want to collide.

.one {
  border: 3px solid #73AD21;
  position: absolute;
}
.two {
  top: 45%;
  left: 44%;
}
.left1,
.right2 {
  float: left;
}
#axis:hover .move-right {
  transform: translate(-350px, 0);
  -webkit-transform: translate(-350px, 0);
  -o-transform: translate(-350px, 0);
  -moz-transform: translate(-350px, 0);
}
.object1 {
  position: absolute;
  transition: all 2s ease-in;
  -webkit-transition: all 2s ease-in;
  -moz-transition: all 2s ease-in;
  -o-transition: all 2s ease-in;
}

<div id="axis" class="one two">
  <img class="object1 left1 move-right" src="http://placehold.it/50x50" />
  <img class="object2 right2 move-left" src="http://placehold.it/75x75" />
</div>

推荐答案

我有两个图像[...]我想要的是是其中一个对象从左侧开始移动，另一个对象从右侧开始移动并在中心相遇，好像它们要碰撞一样。

I have two images [...] what I want is that one of the objects start moving from left side and the other start moving from the right and meet at the center as if they want to collide.

是吗可以通过过渡做到吗？

是的-如果我正确理解了您的问题。

Yes it is - if I have understood your question correctly.

CSS转换的一个重要注意事项是，您应该显式设置开始状态和结束状态，因此浏览器是

An important consideration with CSS transitions is that you should explicitly set the start-state and the end-state, so the browser is clear what it is transitioning between.

所以...在您的问题示例中，声明 translateX ：hover 时图像的c $ c>位置，在：hover 也 >不适用。

So... in the example you post in your question, it's important to state the translateX position for the images when :hover applies, but also when :hover doesn't apply.

那样，浏览器可以清楚地知道它在两个 translateX 坐标之间进行转换。

That way, the browser can be clear what two translateX co-ordinates it is transitioning between.

示例：

#axis {
border: 3px solid #73AD21;
position: absolute;
top: 45%;
left: 44%;
}

#axis img {
float: left;
transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
}

#axis .move-left {
transform: translateX(200px);
-webkit-transform: translateX(200px);
-o-transform: translateX(200px);
-moz-transform: translateX(200px);
}

#axis .move-right {
transform: translateX(-200px);
-webkit-transform: translateX(-200px);
-o-transform: translateX(-200px);
-moz-transform: translateX(-200px);
}


#axis:hover .move-left, #axis:hover .move-right {
transform: translateX(0px);
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-moz-transform: translateX(0);
}

p {
font-weight:bold;
}

<p>Hover over the green border box.</p>

<div id="axis">
<img class="move-right" src="http://placehold.it/50x50" />
<img class="move-left" src="http://placehold.it/75x75" />
</div>

function initialiseAxisImages() {
var axis = document.getElementById('axis');
var axisImages = axis.getElementsByTagName('img');

axisImages[0].classList.remove('move-right');
axisImages[1].classList.remove('move-left');
}

window.addEventListener('load', initialiseAxisImages, false);

#axis {
border: 3px solid #73AD21;
position: absolute;
top: 45%;
left: 44%;
}

#axis img {
float: left;
transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
}

#axis .move-left {
transform: translateX(200px);
-webkit-transform: translateX(200px);
-o-transform: translateX(200px);
-moz-transform: translateX(200px);
}

#axis .move-right {
transform: translateX(-200px);
-webkit-transform: translateX(-200px);
-o-transform: translateX(-200px);
-moz-transform: translateX(-200px);
}

<div id="axis">
<img class="move-right" src="http://placehold.it/50x50" />
<img class="move-left" src="http://placehold.it/75x75" />
</div>

这篇关于如何使用CSS移动对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！