html5 照片,HTML5照片晾衣绳效果（HTML5）

HTML5的很多效果都很悬，尤其实现一些动态、3D的效果很酷。

因为兴趣，所以自己做了一个照片晾在晾衣绳上的效果，当然其实我的最终目的不是做这个，但是一点一点的学习、积累、实现吧。

源码如下，比较简单。

#package{

height:200px;

width: 650px;

background-image: url("background.png");

background-repeat: none;

padding-left: 300px;

margin-top:300px;

}

#package img{

-webkit-transform-origin: top left;

-webkit-transform: perspective(900px) rotate(30deg) skew(0,30deg);

-webkit-transition: all 0.3s ease-in-out;

background: #fff;

box-shadow: 2px 0px 5px grey;

margin-left: -40px;

vertical-align:top;

border: 5px solid #fff;

/* -moz-transition-property: width; Firefox 4

-webkit-transition-property:width; Safari 和 Chrome

-o-transition-property:width; Opera */

}

#package img:hover{

-webkit-transform: perspective(0) rotateY(-10deg) scale(1.2);

margin: 0 90px 0 0px;

pointer:hand;

}

背景图片就是一个晾衣绳而已。

据说transform目前IE 还未支持哈，俺觉得不用理会，以后肯定会支持的，因为HTML5太强大啦。

里面的1.png to 9.png，自己找图片吧，俺是用来晒俺家小baby的照片的，所以不就在这里给出来了。

PS： 我在纠结绳子穿过图片的那种真实效果，希望有人能给予指导。欢迎讨论。