css3照片小案列
Posted 疯子范儿的设计
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3照片小案列相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3小案列</title>
<style type="text/css">
body{
color: #fff;
background: #222;
}
h1{
font-size: 14px;
font-family: "Microsoft Yahei";
text-align: center;
}
.cardfan{
width:300px;
height:200px;
margin: 2rem auto;
}
.cardfan > img{
position:absolute;
border:10px solid #fff;
box-sizing:border-box;
box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2);
-webkit-transform-origin: center 400px;
transform-origin: center 400px;
-webkit-transition: -webkit-transform .7s ease;
transition: transform .7s ease;
}
.cardfan img:first-child{
-webkit-transform:rotate(5deg);
transform:rotate(5deg);
}
.cardfan img:last-child{
-webkit-transform:rotate(-5deg);
transform:rotate(-5deg);
}
.cardfan:hover img:first-child{
-webkit-transform:rotate(25deg);
transform:rotate(25deg);
}
.cardfan:hover img:last-child{
-webkit-transform:rotate(-25deg);
transform:rotate(-25deg);
}
</style>
</head>
<body>
<div class="cardfan">
<img alt="" width="300" height="200"/>
<img alt="" width="300" height="200"/>
<img alt="" width="300" height="200"/>
</div>
</body>
</html>
以上是关于css3照片小案列的主要内容，如果未能解决你的问题，请参考以下文章