<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>

 

# html # css # 前端
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

【GaussDB】使用gdb定位GaussDB编译package报错

avatar 华为开发者空间
cover

华为开发者空间-云主机镜像制作与复制分享功能指导

avatar 华为开发者空间
cover

【GaussDB】全密态等值查询功能测试及全密态技术介绍

avatar 华为开发者空间