本文同步本人掘金平台的原创翻译：https://juejin.cn/post/7089209872566190110
仅使用一个 <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，采用意译。
上面的知识点，你学废了没？
【完】?