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

最新推荐文章于 2024-06-20 18:12:03 发布

Coloroll

最新推荐文章于 2024-06-20 18:12:03 发布

阅读量1.9k

点赞数

分类专栏： HTML CSS 文章标签： CSS扭曲图片成透视效果 CSS做类似PS的透视效果 CSS的perspective CSS transform HTML图片扭曲成透视效果

本文链接：https://blog.youkuaiyun.com/xunpic/article/details/110729129

版权

HTML 同时被 2 个专栏收录

5 篇文章

订阅专栏

CSS

4 篇文章

订阅专栏

最终达到以下透视效果：

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

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);}