用CSS的perspective和transform将图片扭曲成类似PS的透视效果_css 图片扭曲

最终达到以下透视效果：

个人感想：这种效果在PS中用变形扭曲很快就实现，然而在CSS中做这个效果很麻烦，需要不断地微调。其实是可以有【简单粗暴】的方法，那就是直接在CSS中直接定位四点的坐标，当然CSS是没有这个功能的（希望CSS在未来版本中有机会加上，哈哈，草民我仅仅是Naive一下）。

HMTL

<div class="img-box-outer">
	<div class="img-box-inner">
		<img src="images/img_src.jpg">
	</div>
</div>
1
2
3
4
5

CSS

个人理解：perspective要放在父级DIV 和子级DIV的 rotateX / rotateY 配合微调，rotate调整旋转，scale调缩放，translate 调坐标。

.img-box-outer,.img-box-inner,.img-box-inner img{width:1080px;height:764px;}
.img-box-outer{perspective:293;-webkit-perspective:293;}
.img-box-inner{transform:rotateX(8deg) rotateY(.2deg)  rotate(-47.35deg) scale(.675,.678) skew(7.5deg,13deg) translate(95px,-58.5px);}
1
2
3