3D 图片悬停效果

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

完整代码下载

完整代码下载