记录css实现外大内小的3d效果（3d转换）

首先感谢这篇博文：

https://www.cnblogs.com/zheshiyigemanong/p/6793634.html

效果图：

下面是代码部分：

html部分：

<div class="div1">
  <img src="./img/1.jpg" height="411" width="658" alt="" />
  <div class="div1_1">1</div>
</div>

css部分：

.div1 {
  margin-left: 500px;
  margin-top: 100px;
  width: 800px;
  height: 400px;
  transform: perspective(800px);
  transform-style: preserve-3d;
}
img {
  box-shadow: #2a579a 0 0 10px;
  transform: rotateY(30deg);
  width: 100%;
  height: 100%;
}

核心部分：

transform: perspective(800px);
transform-style: preserve-3d;

用perspective定义视觉位置，然后增加3d效果

最后子元素进行形变