使用transform属性并使元素同时正确居中

Question

我试图让两张图像转换成位置。一个来自左边，另一个来自右边。这工作正常，但后来我试图将图像置于其父元素中。现在两张图像都是从左到右对角线从顶部进入。

以下是容器的外观：

我希望左侧图像（需要在左侧容器中居中）从左侧进入，反之亦然右侧进入。

滑入：

到最终位置：

我做错了什么，不允许我的图像从各自的一侧进入，然后以其父元素为中心？\

＆＃13;

＆＃13;

function packageImg() {
  $('#calendar-img').addClass("fadeDisplay");
  $('#tp-img').addClass("fadeDisplay");
};
setTimeout(packageImg, 300);

＆＃13;

.total-center {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
}

#product-img-wrap {
  width: 100%;
  height: auto;
  padding: 50px 0;
  border: 1px solid black;
}

.package-img {
  width: 40%;
  height: auto;
  opacity: 0;
  transition: 1s;
  -webkit-transition: 1s;
}

#calendar-wrap,
#tp-wrap {
  width: 100%;
  position: relative;
}

#calendar-img {
  margin-right: -30px;
}

#tp-img {
  margin-right: 30px;
}

#calendar-img.fadeDisplay {
  opacity: 1;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
}

#tp-img.fadeDisplay {
  opacity: 1;
  transform: translateX(-30px);
  -webkit-transform: translateX(-30px);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="product-img-wrap">
  <div class="left-container">
    <div id="calendar-wrap">
      <img src="images/RealtorCalendar.jpg" alt="Real Estate Calendar Package" class="package-img total-center" id="calendar-img">
    </div>
  </div>
  <div class="right-container">
    <div id="tp-wrap">
      <img src="images/REtp.jpg" alt="Real Estate Calendar Package" class="package-img total-center" id="tp-img">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Here is a fiddle.

Answer 1

由于您已经使用translate()将它们置于首位，因此您必须在转换时从translateX( -50% )开始，因此转换需要看起来像这样

#calendar-img.fadeDisplay {
  opacity: 1;
  transform: translateX( calc(-50% + 30px) );
}

#tp-img.fadeDisplay {
  opacity: 1;
  transform: translateX( calc(-50% - 30px) );
}

旁注，始终将非前缀属性放在最后，并指定转换应使用的值，transition: opacity 1s, transform 1s;

function packageImg() {
  $('#calendar-img').addClass("fadeDisplay");
  $('#tp-img').addClass("fadeDisplay");
};
setTimeout(packageImg, 300);

.total-center {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
}

#product-img-wrap {
  width: 100%;
  height: auto;
  padding: 50px 0;
  border: 1px solid black;
}

.package-img {
  width: 40%;
  height: auto;
  opacity: 0;
  -webkit-transition: opacity 1s, transform 1s;
  transition: opacity 1s, transform 1s;
}

#calendar-wrap,
#tp-wrap {
  width: 100%;
  position: relative;
}

#calendar-img {
  margin-right: -30px;
}

#tp-img {
  margin-right: 30px;
}

#calendar-img.fadeDisplay {
  opacity: 1;
  transform: translateX( calc(-50% + 30px) );
}

#tp-img.fadeDisplay {
  opacity: 1;
  transform: translateX( calc(-50% - 30px) );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="product-img-wrap">
  <div class="left-container">
    <div id="calendar-wrap">
      <img src="images/RealtorCalendar.jpg" alt="Real Estate Calendar Package" class="package-img total-center" id="calendar-img">
    </div>
  </div>
  <div class="right-container">
    <div id="tp-wrap">
      <img src="images/REtp.jpg" alt="Real Estate Calendar Package" class="package-img total-center" id="tp-img">
    </div>
  </div>
</div>