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

最终达到以下透视效果：

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

HMTL

<div class="img-box-outer"><div class="img-box-inner"><img src="data: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);}

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

opencv-python-仿射变换-图片拉伸成平行四边形
将图片拉伸成类似平行四边形这样直接上效果图先不着急上代码, 如果你遇到opencv报以下错误的话, cv2.error: OpenCV(4.5.3) C:\Users\runneradmin\Ap ...
利用perspective 和 transform 里面的几个参数来实现旋转照片墙
利用perspective 和 transform 里面的几个参数来实现旋转照片墙旋转照片墙首先,来看下,是什么效果吧,上效果图 ↓ 其实这个东西,很容易制作,先说下思路, 把照片都给叠在一起,然 ...
1.CSS3 教程-＞多列布局＞ image模块＞ cssTransition 过渡＞ CSS Animations 动画＞ Transform二维
CSS3 教程多列布局 image模块 cssTransition 过渡 CSS Animations 动画 Transform二维介绍 CSS3 是层叠样式表(Cascading Style S ...
鼠标悬停 -css如何实现鼠标移至图片上显示遮罩层及文字
搜索这个效果的时候,很多人都是用css结合jQuery实现的,其实直接用css也可以实现哦~ 效果前: 效果后: 代码: <!DOCTYPE html> <html lang=&qu ...
css实现鼠标触碰动态显示图片文本
css实现鼠标触碰动态显示图片文本这几天想给女朋友准备一份小礼物,就想着,开发一个网站给她表白吧,来试试! 其实这个就是在你原本的网页上面重新添加了另外一个页面,只要你用transition定义一下 ...
css简单实现鼠标悬浮时图片向上浮动的效果
文章目录前言一.效果图二.使用步骤 1.HTML代码 2.CSS代码总结前言 css简单实现鼠标悬浮时图片向上浮动的效果一.效果图二.使用步骤 1.HTML代码代码如下(示例): &l ...
amazeui学习笔记--css（HTML元素4）--图片image
amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...
[css] 描述下你所了解的图片格式及使用场景
[css] 描述下你所了解的图片格式及使用场景通常网页在显示的图片(图形)的时候,有以下几种格式:GIF.PNG.JPG.SVG,还有个比较新的WebP格式.▍GIF优点:GIF是动态的:支持无损耗 ...
[css] 如何让大小不同的图片等比缩放不变形显示在固定大小的div里？写个例子
[css] 如何让大小不同的图片等比缩放不变形显示在固定大小的div里?写个例子图片等比缩放 img{ object-fit: cover/contain;}div宽高比例固定,跟随屏幕变化而变化, ...

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

最终达到以下透视效果：

HMTL

CSS

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

最新文章

热门文章