<script>
$(".t280__menu__item ").each(function(){
let text = $(this).html();
text = text.split("");
text = "<span>" + text.join("</span><span>") + "</span>";
$(this).html(text)
})
$(".t280__menu__item").append("<img class='arrow'>");
// заменить id блока с стрелкой
var arrow_img = $("#rec110364127 img").attr("src");
var arrow_width = $("#rec110364127 .t396__elem").width();
$(".arrow").attr("src", arrow_img);
$(".arrow").width(arrow_width + "px");
$(".t280__menu").css("padding-left", (arrow_width / 2) + "px");
$(".t280__menu__item").hover(function(){
$(".t280__menu__item").addClass("other")
$(this).removeClass("other")
}, function(){
$(".t280__menu__item").removeClass("other")
})
</script>
<style>
/*заменить id блока с стрелкой*/
#rec110364127 {
display: none !important;
}
@media (min-width: 800px) {
.t280__menu {
max-width: 800px !important;
}
}
.t280__menu {
}
.t280__menu__item {
perspective: 300px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
transition: all 1s;
}
.t280__menu__item:hover {
transform: translateX(-15px);
transition: all .6;
}
.t280__menu__item span {
transition: all .6s ease-in-out;
display: inline-block;
transform: translateZ(-50px);
min-width: 0.23em;
}
.t280__menu__item:hover span {
transform: translateZ(-50px) rotateY(180deg);
}
.arrow {
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
transform: translateX(50px);
transition: all .6s;
}
.t280__menu__item:hover .arrow {
opacity: 1;
transform: translateX(15px);
}
.t280__menu__item.other {
opacity: .2;
transform: translateZ(-50px);
}
</style>