<style>
div[class^="test"] {
width: 200px;
height: 200px;
background-color: var(--i);
transition: all .5s;
}
.father {
background-color: rbga(255, 255, 255, .6);
}
.father:hover div {
transform: skewY(10deg);
}
div[class^="test"]:hover {
transform: skewY(0deg);
}
div[class^="test"]:hover~div {
/* transform-origin: 0 0; */
transform: skewY(-10deg);
}
</style>
</head>
<body>
<div class="father" style="display: flex;justify-content: space-around;align-items: center;">
<div class="test1" style="--i:red"></div>
<div class="test2" style="--i:blue"></div>
<div class="test3" style="--i:yellow"></div>
<div class="test4" style="--i:pink"></div>
</div>