css3图片展开的运用

.cardfan{
width:30%;
margin:4rem auto;
position:relative;
}
.cardfan img{
position: absolute;
width:100%;
height:auto;
border:10px solid #666;
box-shadow:2px 2px 4px 0 rgba(0,0,0,.2);
transform-origin:center 600px;//改变元素的位置
transition:all .5s;
cursor:pointer;//鼠标的格式
}
.cardfan img:nth-child(1){
transform:rotate(-5deg);
z-index:3;
filter:grayscale(1);
}
.cardfan:hover img:nth-child(1){
transform:rotate(-25deg);}
.cardfan img:nth-child(3){
transform:rotate(5deg);
z-index:-1;
}
.cardfan:hover img:nth-child(3){
transform:rotate(25deg);}