概述

本文主要讲述如何通过 CSS 简单的设置就可以实现图片的 3D 立体效果。

3D 立体效果

当鼠标移入某一个图片上时，其余图片会像该图片倾斜。

具体实现

静图如下：

• 倒影效果

图片会有一个倒影效果，其代码如下：

<style>
  img {
    -webkit-box-reflect: below 1px linear-gradient(transparent, #0009);
  }
</style>

-webkit-box-reflect属性会有兼容性问题，该属性的作用就是将元素内容在特定方向上进行轴对称反射。

其语法如下：

/* 方向值 */
-webkit-box-reflect: above | below | left | right;
/* 偏移量值 */
-webkit-box-reflect: below 10px;

/* 蒙版值 */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

/* 全局属性值 */
-webkit-box-reflect: inherit | initial | unset;

-webkit-box-reflect: <值> <length> <image>

• hover旋转效果 鼠标移入放大，其余元素旋转效果主要是用到了 CSS3 的 preserve-3d，核心实现如下：

<style>
  .container {
    transform-style: preserve-3d; /**开启3D空间 */
  }

  img:hover {
    transform: perspective(500px) rotateY(0) translateX(-30px) scale(1.5); /*景深 500px 沿X轴负半轴平移30px 放大1.5倍*/
  }

  .container:hover img:not(:hover) {
    margin: 0 -40px;
    filter: drop-shadow(0 0 25px #000) drop-shadow(0 0 45px #000); /*阴影效果*/
    transform: perspective(500px) rotateY(45deg) scale(0.95); /*景深 500px 沿Y轴逆时针旋转45° 缩小0.95倍*/
  }

  .item:hover ~ .item img {
    transform: perspective(500px) rotateY(-45deg) scale(0.95); /*景深 500px 沿Y轴顺时针旋转45° 缩小0.95倍*/
  }
</style>

相关语法介绍

• drop-shadow()：是一个用于创建阴影效果的函数，可以应用到元素上，给元素添加一种阴影的视觉效果。例子中使用了两种不同的阴影效果

drop-shadow(0 0 25px #000) drop-shadow(0 0 45px #000);

上面这段代码表示元素的阴影在X 轴（水平方向）和Y 轴（垂直方向）上的偏移量都是 0，阴影始终保持在元素的正下方；25px表示阴影的模糊半径，这个模糊半径决定了阴影的模糊程度，值越大，阴影越模糊，扩散的范围越广泛。#000表示阴影的颜色。

• transform-style:transform-style属性默认是 2D，当它使用 preserve-3d 时，子元素会按 3D 空间中的位置进行变换，能够让元素在 3D 空间中立体呈现，而不仅仅是二维扭曲。