HTML5照片晾衣绳效果（HTML5）

最新推荐文章于 2021-06-29 19:21:54 发布

aperson111

最新推荐文章于 2021-06-29 19:21:54 发布

阅读量2.1k

点赞数

分类专栏： HTML5 文章标签： HTML5 图片旋转晾衣绳晒照片

本文链接：https://blog.csdn.net/aperson111/article/details/37656505

版权

HTML5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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

源码如下，比较简单。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">


#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;
}
</style>

</script>
</head>
<body>

<div id="package" >
<img src="1.png" width="60" height="80"  />
<img src="2.png" width="80" height="50"  />
<img src="3.png" width="80" height="80"  />
<img src="4.png" width="100" height=60" />
<img src="5.png" width="50" height="80"  />
<img src="6.png" width="80" height="80"  />
<img src="7.png" width="80" height="60"  />
<img src="8.png" width="80" height="80" />
<img src="9.png" width="80" height="80" />
</div>
</body>
</html>

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