admin管理员组

文章数量:1530255

最终达到以下透视效果：

个人感想：这种效果在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>
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);}

本文标签： 透视类似效果图片perspective

版权声明：本文标题：用CSS的perspective和transform将图片扭曲成类似PS的透视效果 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1725895276a1047564.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。