为什么我的动画元素不居中？

Question

我已经坚持了这么久，为什么这辆车不能用我的动画绕中线转弯？它似乎有点偏向右边？

＆＃13;

＆＃13;

.car {
  width: 40px;
  height: 60px;
  background: #f00;
  left: 50%;
  transform: translate(-50%, 0);
  animation: swerve 2s linear infinite;
  top: 10%;
  position: absolute;
}
@keyframes swerve {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(50%, 0);
  }
}
.road {
  width: 200px;
  background: black;
  height: 500px;
  display: block;
  position: relative;
}
.road-middle {
  border: 1px dotted #fff;
  transform: rotate(90deg);
  display: block;
  position: relative;
  top: 200px;
}

＆＃13;

<div class='road'>
  <span class="road-middle"></span>
  <div class='car'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

还有如何控制中间边界的长度？

Answer 1

您使用left:50%但不计算车宽。要解决此问题，您可以像这样更改动画：

＆＃13;

＆＃13;

.car {
    width: 40px;
    height: 60px;
    background: #f00;
    left: 50%;
    animation: swerve 2s linear infinite;
    top: 10%;
    position: absolute;
}


@keyframes swerve {
	0% {
		transform: translate(-50%, 0);
	}
  
    25% {
		transform: translate(-100%, 0);
	}
      

	75% {
		transform: translate(0%, 0);
	}
  
    100% {
      transform: translate(-50%, 0);
    }
}

.road{
  width:200px;
  background:black;
  height:500px;
  display:block;
  position:relative;
}

.road-middle{
  border: 1px dotted #fff;
    transform: rotate(90deg);
    display: block;
    position: relative;
    top: 200px;
}

＆＃13;

<div class='road'>
  <span class="road-middle"></span>
	<div class='car'></div>

</div>

＆＃13;

＆＃13;

＆＃13;

要控制道路中间元素的长度，您可以执行以下操作：

.road-middle{
  border: 1px dotted #fff;
  display: block;

  /* remove the rotation */

  /*position the line */
    position: absolute;
    left:calc(50% - 1px);

  /*controll the length of the line */
  height:200px;
  top:150px;
}

＆＃13;

＆＃13;

.car {
    width: 40px;
    height: 60px;
    background: #f00;
    left: 50%;
    animation: swerve 2s linear infinite;
    top: 10%;
    position: absolute;
}


@keyframes swerve {
	0% {
		transform: translate(-50%, 0);
	}
  
    25% {
		transform: translate(-100%, 0);
	}
      

	75% {
		transform: translate(0%, 0);
	}
  
    100% {
      transform: translate(-50%, 0);
    }
}

.road{
  width:200px;
  background:black;
  height:500px;
  display:block;
  position:relative;
}

.road-middle{
  border: 1px dotted #fff;
    display: block;
  
  /* remove the rotation */
  
  /*position the line */
    position: absolute;
    left:calc(50% - 1px);
  
  /*controll the length of the line */
  height:200px;
  top:150px;
}

＆＃13;

<div class='road'>
  <span class="road-middle"></span>
	<div class='car'></div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<div class="box"> <form id='group'> <label> <input type="radio" checked="checked" name="group1" class="trigger" data-rel="chart-item1" /> Item 1 </label> <label> <input type="radio" name="group1" class="trigger" data-rel="chart-item2" /> Item 2 </label> </form> </div>

您没有减去车宽

Answer 3

如果你评论这2行

 transform: translate(-100%, 0); 
 animation: swerve 2s linear infinite;

你阻止不居中..

所以替换（或解决你的第一个问题）

@keyframes swerve {
  0% {
    transform: translate(-100%, 0);
  }
  50% {
    transform: translate(0%, 0);
  }
}

Answer 4

添加left: 50%将元素的最左边与中心对齐。要将元素的垂直中心与容器的中心对齐，您需要添加相当于元素宽度一半的负边距，这会将其向左推回一点。例如。在这里，我已将margin-left: -20px;添加到您的车中，现在它位于中心位置：

.car {
  width: 40px;
  height: 60px;
  background: #f00;
  left: 50%;
  transform: translate(-50%, 0);
  animation: swerve 2s linear infinite;
  top: 10%;
  margin-left: -20px;
  position: absolute;
}
@keyframes swerve {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(50%, 0);
  }
}
.road {
  width: 200px;
  background: black;
  height: 500px;
  display: block;
  position: relative;
}
.road-middle {
  border: 1px dotted #fff;
  transform: rotate(90deg);
  display: block;
  position: relative;
  top: 200px;
}

<div class='road'>
  <span class="road-middle"></span>
  <div class='car'></div>
</div>

Answer 5

.car不以.road为中心，将.car的css更改为此

.car{
    left:0;
    right:0;
    margin:0 auto;
}

更改road-middle虚线的长度，不要旋转它，而是使用width:0和height:100%，请使用此css：

.road-middle{
    border: 1px dotted #fff;
    display: block;
    position: relative;
    top: 0;
    width:0px;
    height:100%;
    left:0;
    right:0;
    margin:0 auto; 
}

请参阅下面的代码段

.car {
  width: 40px;
  height: 60px;
  background: #f00;
  left: 0;
  right:0;
  margin:0 auto;
  transform: translate(-50%, 0);
  animation: swerve 2s linear infinite;
  top: 10%;
  position: absolute;
}
@keyframes swerve {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(50%, 0);
  }
}
.road {
  width: 200px;
  background: black;
  height: 500px;
  display: block;
  position: relative;
}
.road-middle {
  border: 1px dotted #fff;
  display: block;
  position: relative;
  top: 0;
  width:0px;
  height:100%;
  left:0;
  right:0;
  margin:0 auto;
 }

<div class='road'>
  <span class="road-middle"></span>
  <div class='car'></div>
</div>

Answer 6

因为你已经提到40px并将车从左边移动了50％，这意味着你的车位于50％+ 40px到右边。请尝试以下代码。

＆＃13;

＆＃13;

.car {
  width: 18%;
  height: 60px;
  background: #f00;
  left: 41%;
  transform: translate(-50%, 0);
  animation: swerve 2s linear infinite;
  top: 10%;
  position: absolute;
}
@keyframes swerve {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(50%, 0);
  }
}
.road {
  width: 200px;
  background: black;
  height: 500px;
  display: block;
  position: relative;
}
.road-middle {
  border: 1px dotted #fff;
  transform: rotate(90deg);
  display: block;
  position: relative;
  top: 200px;
}

＆＃13;

<div class='road'>
  <span class="road-middle"></span>
  <div class='car'></div>
</div>

＆＃13;

＆＃13;

＆＃13;