Использование свойства transform и правильное выравнивание элемента в то же время

Question

Я пытаюсь преобразовать два изображения в положение. Один слева, другой справа. Это работало нормально, но затем я попытался центрировать изображения внутри своего родительского элемента. Теперь оба изображения идут сверху с диагональю слева направо.

Вот что контейнеры выглядеть следующим образом:

Я желающий левое изображение (которое должно быть сосредоточено в левом контейнере), чтобы прийти в с левой и наоборот на право ,

Раздвижные в:

Для окончательной позиции:

Что я делаю неправильно, не позволяя мои изображения прийти с их соответствующей стороны и затем центр в их исходном элементе? \

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

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

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>