一个元素即可实现 3D 插图效果

仅使用一个 ​​<img>​​​ 标签，使用一个小技巧就可以创建一个 ​​3D​​​ 插图，没有为伪元素，没有其他其他标签，没使用 ​​SVG​​​。仅仅是一个标签配合一些 ​​CSS​​ 样式。

效果图如下：

不错哦～

我们来看下代码，分解下：

<img src="https://picsum.photos/id/1069/500/300"

​​html​​​ 代码没什么好说的了吧～ 就是一个 ​​img​​ 标签。

img {
  --x:10px;
  --y:20px;
  clip-path:polygon(
       var(--y)              var(--y),
       calc(100% - var(--y)) var(--y),
       calc(100% - var(--y)) calc(100% - var(--y)),
       var(--y)              calc(100% - var(--y)),
       0 calc(100% - var(--x) - var(--y)),
       0 calc(var(--x) + var(--y)));
  margin:30px;
  transform:perspective(1000px) rotateY(40deg);
  outline: var(--y) solid rgba(0,0,0,0.4);
  outline-offset: calc(-1*var(--y));
  padding:var(--y) var(--y) var(--y) 0;
  transition:1s all;
  max-width:100%;
  display:block;
  margin:auto;
}

img:hover {
  transform:perspective(1000px) rotateY(0deg);
  clip-path:polygon(
       var(--y)              var(--y),
       calc(100% - var(--y)) var(--y),
       calc(100% - var(--y)) calc(100% - var(--y)),
       var(--y)              calc(100% - var(--y)),
       var(--y)  calc(100% - var(--x) - var(--y)),
       var(--y)  calc(var(--x) + var(--y))
    );
}

我们先对 ​​img​​ 原始的样式了解～

我们先预设变量 ​​--x: 10px;​​​ 和 ​​--y: 20px​​​。然后第一步对 ​​<img>​​ 标签添加轮廓：

/* [1] outline */
outline: var(--y) solid rgba(0,0,0,0.4);

第二步，添加轮廓的偏移：

/* [2] outline-offset */
outline-offset: calc(-1*var(--y));

相当于给图片添加了边框的遮罩层。

第三步，使用 ​​padding​​ 保留图片左侧的轮廓遮罩。

/* [3] padding */
padding:var(--y) var(--y) var(--y) 0;

之后，我们使用路径裁切 ​​clip-path​​​，将图片裁剪出一个多边形 -- 使用 ​​polygon​​。

/* [4] clip-path */
clip-path:polygon(
       var(--y)              var(--y),  /* a 点 */
       calc(100% - var(--y)) var(--y),  /* b 点 */
       calc(100% - var(--y)) calc(100% - var(--y)), /* c 点 */
       var(--y)              calc(100% - var(--y)), /* d 点 */
       0 calc(100% - var(--x) - var(--y)), /* x 点 */
       0 calc(var(--x) + var(--y))); /* y 点 */

咦，这样看着是不是像 ​​3d​​ 图片了呢～

为了更加逼真，我们加上 ​​tranform​​ 属性：

/* [5] transform */
transform:perspective(1000px) rotateY(40deg);

这里我们使用了透视效果，相当于，我们在 ​​Z​​​ 轴上距离原点 ​​1000px​​​ 处防止了投影仪；让后我们将图在 ​​y​​​ 轴上正向旋转 ​​40​​ 度。

下面我们加上 ​​hover​​ 效果，先上图：

我们对裁切的路径的点做出了调整，上面是 ​​hover​​​ 稳定后的效果图，更改了点 ​​x -> x'​​​ 和 ​​y -> y'​​​ 两处，并恢复了图片在 ​​y​​​ 恢复为 ​​0​​，如下：

transform:perspective(1000px) rotateY(0deg);
clip-path:polygon(
       var(--y)              var(--y), /* a 点 */
       calc(100% - var(--y)) var(--y), /* b 点 */
       calc(100% - var(--y)) calc(100% - var(--y)), /* c 点 */
       var(--y)              calc(100% - var(--y)), /* d 点 */
       var(--y)  calc(100% - var(--x) - var(--y)), /* x' 点 */
       var(--y)  calc(var(--x) + var(--y))); /* y' 点 */

当然，为了动画更加平滑，需要添加 ​​transition​​ 效果，这里添加了：

transition:1s

表明所有的动画将在 ​​1s​​ 内平滑移动。

当然，上面只是对图片的左边进行 ​​3D​​ 透视效果而已，你可以对其底部进行透视，比如：

本文翻译自 3D image with one element，采用意译。

上面的知识点，你学废了没？ 💨

【完】✅