3D 图片悬停效果

效果展示

在这里插入图片描述

CSS 知识点

background 属性的综合运用
transform 属性的综合运用

页面整体布局

<div class="box"><span style="--i: 0"></span><span style="--i: 1"></span><span style="--i: 2"></span><span style="--i: 3"></span>
</div>

编写图片框样式

.box {width: 640px;height: 360px;transform: rotate(-25deg) skew(25deg);transition: 0.5s;display: flex;border-left: 5px solid #fff;border-left: 5px;/* 只是为了看图片框样式才进行设置的参数后续要删除 */background: #fff;
}

编写图片框选型效果

.box:hover {transform: rotate(-25deg) skew(-25deg) translateY(-20px);
}

编写 4 等分图片容器框和设置对应背景图片

图片容器框主要作用是用于图片悬停后使用transform属性实行 3D 效果。

.box span {width: 25%;height: 100%;background: none;display: block;transition: 0.5s;pointer-events: none;background: url(./bg.jpg);background-size: cover;/* 640px / 4 等分计算出每个图片容器背景图片的移动位置 */background-position: calc(-160px * var(--i));
}

编写图片容器选型效果

.box:hover span:nth-child(odd) {transform: skewY(25deg);box-shadow: inset 20px 0 50px rgba(0, 0, 0, 0.5);
}
.box:hover span:nth-child(even) {transform: skewY(-25deg);box-shadow: inset 20px 0 50px rgba(0, 0, 0, 0.5);
}

图片框添加边框

.box span {width: 25%;height: 100%;background: none;display: block;transition: 0.5s;pointer-events: none;background: url(./bg.jpg);background-size: cover;background-position: calc(-160px * var(--i));border-top: 5px solid #fff;border-bottom: 5px solid #fff;
}
.box span:first-child {border-left: 5px solid #fff;
}
.box span:last-child {border-right: 5px solid #fff;
}