纯 CSS 实现 3D 效果：探索视觉新维度！前言最近偶然刷到css实现3d效果，于是自己写了个demo记录一下，效果

前言

最近偶然刷到css实现3d效果，于是自己写了个demo记录一下，效果预览如图

动画.gif

代码实现

1.核心逻辑

父元素transform-style: preserve-3d保留子元素的 3D 变换，使其在 3D 空间中正确显示以及perspective设置视角

perspective: 1000px;
transform-style: preserve-3d;

底部灰色div以及杯子图片设置变换过渡动画，持续时间为1秒。

transition: transform 1s;

当鼠标hover底部div时, 将<div>沿Z轴向前移动100px，并绕X轴旋转75度。

 transform: translateZ(100px) rotateX(75deg);

并且将图片向上移动90px，并沿Z轴向前移动250px。

transform: translateY(-90px) translateZ(250px);

然后就完成了，就是这么简单。

2.完整代码

图片放在这边，自行拷贝

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <article>
        <div></div>
        <img src="你的图片存储路径" alt="" srcset="">
    </article>

    <style>
        article {
            display: grid;
            place-items: center;
            height: 100vh;
            perspective: 1000px;
            transform-style: preserve-3d;
        }

        div {
            background-color: #ddd;
            border-radius: 2rem;
            box-shadow: inset 10px 10px 10px #999, inset -10px -10px 10px #fff;
            width: 280px;
            aspect-ratio: 1;
            transition: transform 1s;
        }

        img {
            position: absolute;
            width: 11%;
            translate: -50% -50%;
            transition: transform 1s;
            inset: 50%;
        }

        div:hover {
            transform: translateZ(100px) rotateX(75deg);
            box-shadow: 10px 10px 10px #999, -10px -10px 10px #fff;
        }

        div:hover+img {
            transform: translateY(-90px) translateZ(250px);
        }
    </style>
</body>

</html>