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

[reng99]

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第22天，点击查看活动详情

仅使用一个 <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 all;

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

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

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

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

【完】✅