javascript变形,css3变形

js中怎么把本是长方形图片压缩成梯形图片，我想做出一个立体的图片转换效果出来？？？求各位大神指点

郭敦顒回答：

这可能是一项尚未涉及到的等差变形技术——

把本是长方形图片压缩成梯形图片，按其一半设定为正方形，等价于压缩一边为直角梯形，按对称性展开即为等边梯形了。

设正方形边长为10cm,400万像素图片，那么每边有2000个（严格说是2001个）等分点，划平行线，将图片分成400万个小方格，这小方格即为像素。每个小方格的边长则为10cm/2000=50mm/1000=50μm（微米）。

如果把最上方格宽度尺寸由50μm改为40μm向下依次递增到50μm，社会上尺度是一个等差数列，项数为2000，首项为40μm，末项为50μm。

如此变形，即可把本是长方形图片压缩成梯形图片。

在实用上可利用视线物像的大小与距离成反比（αf=ζ, α—物像尺寸，f—距离， ζ为常数）这一原理，通过照相，把图片斜放或斜照，即可将本是长方形图片改变成梯形图片了。《几何原本》一书的封面原为长方形的，通过这种摄像，封面变成了梯形。

非常遗憾的是图片不能上传了，已有十几天。此种摄像方法，你若能用得上，可自拍看看效果。

在摄影棚中的一些特技摄影，应该会有这方面的运用。

相关问答

Q1: javascript怎么能旋转图片任意角度

文件－－－打开，找到你要编辑的图片

打开以后呢，

再点

修改－－－－变形－－－数字变形－－－下拉菜单选”旋转”，输入你想要的角度，保存就可以了．．

但是这样，图片的突出部分会消失，如果你不想它消失的话，点

修改－－－－画布－－－符合画布

Q2: 怎么用js实现图片的变形

这个用css就可以解决，当然css能解决的js基本都能解决。

首先css：

左边图片设置关键css属性（其他属性你自己补充）：

①透明度：filter: Alpha(Opacity=50);opacity:0.5;兼容火狐和IE，

②Z轴顺序（要小于右边图像）：z-index: 1;也可以不设置；

③定位，固定大小：position: relative(或absolute); left: 100px; top:100px;width:100px;height:80px;

右边图片设置关键css属性（其他属性你自己补充）：

①Z轴顺序（要保证大于左边图像的Z轴顺序）：z-index: 2;

②定位，固定大小：position: relative(或absolute);left: 40px; top:100px;width:100px;height:80px;

js实现的话就稍微复杂一点，如果你懂jQuery也许还能容易点，所以就不写了，太多代码，

因为css就可以解决，那么你就用css实现吧。

至于你是否要实现矩形图像变成梯形图片，我肯定的说也是可以做到的，

就比如：flip.js，这是个翻牌效果，他在翻牌的时候就是矩形到梯形，梯形回矩形。

Q3: js实现图片旋转效果

1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。

2、然后对HTML中的内容定义一些样式，如下图所示，主要是标题以及ul的样式。

3、接下来就给图片所在的li定义宽高，如下图所示。

4、然后给图片设置过渡效果，过渡使用transition属性，如下图所示。

5、当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，负数代表的是逆时针。

6、最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转。

Q4: js 代码刷新当前页面导致页面变形的问题

JS本来不会让前台变形，是你后台的问题。如果我没猜错你是用后台输出JS的，比如response.write("scriptwindow.location.relaod()/script")。然后网页就会变成这样：

scriptwindow.location.relaod()/script

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""

html

head

……

这会导致!DOCTYPE html……失效，然后CSS样式就会按照另一种标准展示，导致页面变形