rotateY или rotateX просто уменьшаю мою картинку, когда они вращают ее

Question

У меня есть div продукта, и всякий раз, когда я нахожусь над ним, он поворачивается и показывает другую сторону, он работает, и все, кроме вещи, становится меньше, вот идея от того, как это выглядит here.

.product { 
 
    transform: scale(1.5); 
 
    transition: transform 1s cubic-bezier(.1, -.60, .50, 1.2); 
 
    perspective: 700px; 
 
    transform-style: preserve-3d; 
 
} 
 
.inner img { 
 
    height: 65px; 
 
    width: 65px; 
 
} 
 
.product:hover { 
 
    transform: rotateY(-180deg); 
 
} 
 
.product:hover .side-b { 
 
    transform: rotateY(180deg); 
 
    display: block; 
 
} 
 
.product:hover .side-a { 
 
    visibility: hidden; 
 
} 
 
.product-desc { 
 
    color: #fff; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    display: flex; 
 
    /* For centering text inside .photo-overlay */ 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    display: none; 
 
    line-height: 0; 
 
}

<li> 
 
    <div class="product"> 
 
    <div style="height: 7px;visibility: hidden;"></div> 
 
    <div class="inner"> 
 
     <img class="side-a" src="../images/test.jpg" alt="International Space Station"> 
 
     <div class="product-desc side-b"> 
 
     <h3>hi</h3> 
 
     <a href="#" class="button">buy</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</li>

Answer 1

изменение размера из-за вашего первого правила transform: scale(1.5);. Он сообщает браузеру сначала изменить размер элемента .product на 50% больше его первоначального размера. Но, чем при наведении, вы перезаписываете свой transform - правило только инструкцией вращения. Либо удалите это первое правило или использовать его в :hover определения:

.product:hover { 
    transform: scale(1.5) rotateY(-180deg); 
} 

Answer 2

transform: scale(1.5); создали проблему! Благодаря @Mohd Asim Suhail за указание!

трансформация: масштаб (1.5); создает проблему для вас, - Mohd Asim Suhail 3 мин назад