Где баг переворачивания в css?

Question

[an]

Делал эффект переворачивания по примеру(мануалу)
Трабла у меня заключается в том, что если навести на край блока, то подглючивает переворот, на примере, по которому делал такого не наблюдаю
Вот сайт где не могу понять в чем проблема

Буду благодарен

Answer 1

[MeMoJlor]

Это потому что изменяется размер слоя, на котором стоит курсор. При уменьшении, курсор не попадает на слой и событие прекращается увеличивая слой и так бесконечно. Вам нужно сделать слой статичным, на котором стоит событие.

Comments

[an]

Спасибо.
не совсем понял
что значит статичным? фиксированного размера? или что?

[MeMoJlor]

Андрей, Да, фиксированного размера и чтобы не двигался

[an]

MeMoJlor, Благодарю, буду что то пробовать
хотя задавал уже фиксированную ширрину, результата ноль

[MeMoJlor]

Андрей, Она фиксирована, но стили которые переворачивают ее, меняют ширину относительно наблюдателя.

[an]

MeMoJlor, будьте добры, подскажите конкретнее где смотреть
я честно не могу понять
вот этот участок кода

.flipper{perspective: 1000;}
    .flipper:hover {
    transform: rotateY(180deg);
    }
     
    .flip-container, .front, .back {
    width: 100%;
    
    }
    .flipper {
    transition: 0.5s;
    transform-style: preserve-3d;
    position: relative;
    }
    .front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 20px;
    border-radius: 5px;
    width: 100%;  // тут еслизадавать в px ничего не меняет 
    }
    .front {
    z-index: 2;
    
    }
    .back {
        transform: rotateY(180deg);
        height: 350px;
        width: 100%;
        background: rgba(0,0,0,0.8);
        display: grid;
        align-items: center;
        justify-content: center;
        z-index: 99999;
       }
       
    }

[MeMoJlor]

Андрей, Проблема в HTML.
создайте еще один div внутри product_item и уже на него укажите класс flipper.