Я настроил разделенную анимацию для логотипа ниже, используя функции клип-пути и преобразования при наведении с помощью CSS. Однако clip-path не поддерживается в IE ad Edge. Поэтому я хотел бы отключить «преобразование: перевод» при использовании IE и Edge.
Вот что происходит в IE (неправильно):
Вот что должно происходить:
Я уже пытался использовать -ms-transform: none !important; в классах до и после наведения, но это, похоже, не отключает функцию преобразования при использовании IE/Edge.
HTML:
<div class="image">
</div>
CSS:
width:340px;
height:230px;
background-image:url(https://i.ibb.co/fDzZ6Sc/Logo.png);
background-size:0;
position:relative;
}
.image:before,
.image:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image:inherit;
background-size:cover;
transition:1s;
}
.image:before {
clip-path:polygon(0 0, 32% 0 ,32% 19%, 97% 100%, 0 100%);
-ms-clip-path: none !important;
}
.image:after {
clip-path:polygon(100% 0,32% 0,32% 19%,97% 100%);
}
.image:hover::before{
transform:translate(-20px,-5px);
-ms-transform: none !important;
}
.image:hover::after{
transform:translate(20px,5px);
-ms-transform: none !important;
}
Ожидаемый результат заключается в том, что IE/Edge распознает, что для этой функции установлено значение none, и не будет анимации при наведении курсора на логотип.
