CSS3实现景深3D视觉效果

效果图：

添加效果前：

添加效果后：

CSS:

.box {width: 310px;height: 260px;margin: 20px auto;/* 景深：离视线的距离 */perspective: 800px;background-color: red;display: flex;justify-content: center;align-items: center;}.box .pic{width: 200px;height: 130px;line-height: 130px;text-align: center;background-color: #000;position: relative;/* 设置3d环境 */transform-style:preserve-3d;transform: rotateY(-60deg);color: #fff;font-size: 30px;}