如何实现；“深度”；使用3d css转换

我正在尝试使用CSS创建一个“透视模型”。关于如何在Photoshop中使用3D图层实现这一点，有很多教程，但我想使用CSS。以下是我努力实现的一个例子：

下面是代码（使用原始图像）：

#透视图{
宽度：400px；
高度：500px；
位置：绝对位置；
背景图像：url（“https://i.imgur.com/foDEYpB.png");
背景重复：无重复；
背景尺寸：封面；
最高：50%；
左：50%；
左边距：-200px；
利润上限：-250px；
变换：旋转3d（360度，120度，-90度，60度）旋转z（-30度）；
盒影：-15px 15px 20px rgba（0,0,0,0.5）；
}

---

尝试添加三种类型的图像以产生3D效果。对图像使用带有旋转的

transform

属性以获得所需的结果

答案参考

透视图{
位置：相对位置；
宽度：400px；
高度：500px；
变换样式：保留-3d；
过渡：所有500毫秒的时间都很容易进入；
变换：rotateY（20度）rotateX（60度）rotateZ（-10度）；
变换：rotateY（15度）rotateX（50度）rotateZ（-15度）；
盒影：-40px 80px 80px-10px rgba（0,0,0,0.7）；
光标：指针；
右边距：30px；
显示：内联块；
左缘：30%；
}
.img透视图{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：400px；
高度：500px；
转化：translateZ（16px）；
}
.底部，
.左{
位置：绝对位置；
宽度：400px；
高度：500px；
显示：块；
过渡：所有1s线性；
溢出：隐藏；
边界半径：3px；
转化：translateZ（16px）；
}
.左{
变换：旋转（270度）translateX（-1px）；
变换原点：左中；
宽度：18px；
}
.底部{
变换：rotateX（90度）translateY（15px）translateZ（-480px）；
变换原点：底部中心；
高度：18px；
}
.底部img{
变换：rotateX（180度）；
宽度：100%；
高度：500px；
左：0px；
}

---

下面是一个使用多个背景来模拟这种效果的黑客想法。诀窍是添加2个半透明渐变以创建阴影效果，然后添加2个其他渐变以剪切角的一小部分以获得3D形状

并非所有图像的结果都是完美的：

.wrapper{
显示：内联块；
透视图：1000px；
}
.盒子{
利润率：50像素；
宽度：200px；
高度：200px；
变换：旋转3d（360度，120度，-90度，60度）旋转z（-30度）；
背景：
线性梯度（至右下角，透明49%，#fff 52%），右下角/14px 10px，
线性梯度（至左上角，透明49%，#fff 52%）左上角/10px 14px，
线性梯度（rgba（0,0,0,0.5），rgba（0,0,0,0.5））0 px/10 px 100%，
线性梯度（rgba（0,0,0,0.5），rgba（0,0,0,0.5））100%100%/钙（100%-10px）10px，
网址(https://picsum.photos/id/1061/1000/800)中心/盖；
背景重复：无重复；
}

你需要不同颜色的阴影吗？@Saravana不是阴影，如果有必要的话，试着得到一张有厚度的凸起卡片。我在玩弄这个。我相信你想要的术语是。