html – 如何使用CSS移动对象？

我在页面中间并排设置了两个图像(对象),我希望它们相互移动,就好像它们会碰撞并停在它们旁边一样.

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

.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.

Is it possible to do it by transition?

是的 – 如果我正确理解你的问题.

CSS转换的一个重要考虑因素是您应该明确设置启动状态和结束状态,这样浏览器就可以清楚地了解它之间的转换.

所以…在你在问题中发布的例子中,重要的是在以下情况下说明图像的translateX位置：hover适用时,以及何时：hover不适用.

这样,浏览器可以清楚它正在转换的两个translateX坐标.

例：

#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>

版本2(页面加载时只移动一次)

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>