title: 记录css实现外大内小的3d效果（3d转换） date: 2019-08-02 15:13:52 tags: CSDN迁移
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：blog.csdn.net/qq_32858649…
首先感谢这篇博文：
效果图：
下面是代码部分：
html部分：
<div class="div1">
<img src="./img/1.jpg" height="411" width="658" alt="" />
<div class="div1_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效果
最后子元素进行形变
