包含一个元素的 3D 图像
非常非常非常令人印象深刻，太棒了！
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
只需一个标签，就能快速创建 3D 插图<img>。无需伪元素、无需额外标签、无需 SVG，什么都不用！只需一个标签和几行 CSS 代码。
干得好
让我们深入研究代码。
img {
--x:10px;
--y:20px;
clip-path:polygon( /* 4 */
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 */
transform:perspective(1000px) rotateY(40deg); /* 5 */
outline: var(--y) solid rgba(0,0,0,0.4); /* 1 */
outline-offset: calc(-1*var(--y)); /* 2 */
padding:var(--y) var(--y) var(--y) 0; /* 3 */
}
img:hover { /* 6 */
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' */
}
以下是逐行解释代码的示意图。
我没什么要补充的了：祝您玩得愉快！
我们可以轻松调整上述公式以考虑任何方向。以下是底部方向的公式：
其他方向我就不做了，你自己做吧 😉
文章来源：https://dev.to/afif/3d-image-with-one-element-1c87