SOURCE

<div class="body">
    <div class="container">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1737304113,4195616117&fm=26&gp=0.jpg" alt="">
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2428743095,1222996093&fm=26&gp=0.jpg" alt="">
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4049407694,2620143159&fm=26&gp=0.jpg" alt="">
    </div>
</div>

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    min-height: 100vh;
}

.container {
    width: 1100px;
    display: flex;
    justify-content: space-between;
}

.container img {
    max-width: 350px;
    /* 
        perspective(n)： 为3D转换元素定义透视视图。
        transform-origin： 设置元素的几点位置。
        box-reflect： 倒影特效（包含3个值）
             direction：above below left right
             offset：定义反射偏移的距离 （真是图片与倒影的距离）
             mask-box-image： 定义遮罩图像，改图像将覆盖投影区域，可以为none，为none时没有遮罩图像，和图片一样
             一般通过设置linear-gradient来实现遮挡
     */
    transform-origin: center;  
    transform: perspective(800px) rotateY(20deg);
    transition: .5s;
    -webkit-box-reflect: below 1px  linear-gradient(transparent,transparent,#0004);
}
.container:hover img {
    opacity: 0.3;
}

.container img:hover {
    opacity: 1;
    transform: perspective(800px) rotateY(0deg);
}