在页面上再添加两张图片 ... 然后直接在每个图像元素的上面应用一个 3d 的变换 .. transform ... 里面用一个 perspective 方法，设置一个透视 ..

再用一个 roateY 设置一下旋转 ..

你会发现每张图片的显示都使用了自己的变换 ... 再换成 roateX 看一下 ...

如果你想把这些元素作为一个整体去应用 3D 的变换 ... 可以这样 ... 添加一个容器，可以加上一个 css 类，比如 images ... 用它去包装一下这些图像 ...

回到样式表 .. 给 .images 容器添加点样式 .. 设置一下高度 ... 宽度 ... 再给它一个边框 ..

为了可以添加一个过渡效果，再添加一个 transition: all 1s;

去掉单独在图像上添加的 3d 变换 ..

然后在这个图像容器里面，使用一个 perspective 属性 ... 设置一下整体的透视 ...

在单独的图像元素的上面，我们可以再用一个变换 ... transform ... 再用一下这个 X 轴的旋转 ..

现在你会发现，这些图像元素会有一个整体的透视感 ...

使用 perspective-origin 我们可以去改变用户的视角 ... 目前这个视角就是正冲着这些元素 ...

添加一个 perspective-origin ，设置一下 x 还有 y 的位置 ...

比如我现在想把这个视角设置成 底部 中间的这个位置上 ... 这个 perspective-origin 属性的 x 的值应该是 50% ，表示中间 ... y 的值用一个关键词 bottom ... 相当于是 100% ...

你会发现这个视角的变化 ..