首先css：
左边图片设置关键css属性（其他属性你自己补充）：
①透明度：filter: Alpha(Opacity=50)opacity:0.5兼容火狐和IE，
②Z轴顺序（要小于右边图像）：z-index: 1也可以不设置；
③定位，固定大小：position: relative(或absolute)left: 100pxtop:100pxwidth:100pxheight:80px
右边图片设置关键css属性（其他属性你自己补充）：
①Z轴顺序（要保证大于左边图像的Z轴顺序）：z-index: 2
②定位，固定大小：position: relative(或absolute)left: 40pxtop:100pxwidth:100pxheight:80px
js实现的话就稍微复杂一点，如果你懂jQuery也许还能容易点，所以就不写了，太多代码，
因为css就可以解决，那么你就用css实现吧。
至于你是否要实现矩形图像变成梯形图片，我肯定的说也是可以做到的，
就比如：flip.js，这是个翻牌效果，他在翻牌的时候就是矩形到梯形，梯形回矩形。
给你实现思路：
扑克翻页效果的原理在于利用眼睛观察物体的错觉，扑克翻页效果分解为两个步骤：
按扑克中轴线，以固定速率将img的width逐步变为0，这样扑克将消失；
动态替换img为扑克反面，以同样速率将img的width由0变为原宽度，完成翻页。
关键代码：
<div id="divad1" class="poker" style="text-align: center">
<a onclick＝"javascript:flipPoker()" href="#"><img src="front.jpg" id="picad1" height="200" border="0" style="width: 200pxdisplay: inline-block"></a></div>
给这个div内的img元素绑定函数flipPoker
function flipPoker( ){
var tar = $('#picad1')
var origin = tar.attr('src')
var back = "back.jpg" //扑克背面图片名称
//以中轴线渐变将图片隐藏,并瞬间替换img图片内容
tar.animate({width:'0px'},"fast",function(){tar.attr('src',origin)})
//立即渐变还原图片width
tar.animate({width:'200px'},"fast")
}
＝＝＝＝＝＝＝＝＝＝＝＝＝
上述代码用到了jQuery1.8.3 的animate函数
html代码里的样式"text-align:center"很关键，没有这个样式，图片将会自左向右渐变，加了样式之后就是按中轴线渐变了
如果还不行就参考这个页面的代码：
http://vwfc-dealer.cneln.net/eln3_asp/index.do
