效果展示

图1 未点击

图2 点击后

知识点：transform和transition

html部分

    <div class="wrapper">
        <ul class="stacks-cards">
            <li class="stack stack1">
                <ul>
                    <li class="card card1">
                        <img src="./img/pic1.jpg" alt="">
                        <div class="con">pictures</div>
                    </li>
                    <li class="card card2">
                        <img src="./img/pic2.jpg" alt="">
                        <div class="con">pictures</div>
                    </li>
                    <li class="card card3">
                        <img src="./img/pic3.jpg" alt="">
                        <div class="con">pictures</div>
                    </li>
                </ul>
            </li>
            <li class="stack stack2">
                <ul>
                    <li class="card card1">
                        <img src="./img/pic4.jpg" alt="">
                        <div class="con">pictures</div>
                    </li>
                    <li class="card card2">
                        <img src="./img/pic5.jpg" alt="">
                        <div class="con">pictures</div>
                    </li>
                    <li class="card card3">
                        <img src="./img/pic6.jpg" alt="">
                        <div class="con">pictures</div>
                    </li>
                </ul>
            </li>
            <li class="stack stack3">
                <ul>
                    <li class="card card1">
                        <img src="./img/pic7.jpg" alt="">
                        <div class="con">pictures</div>
                    </li>
                    <li class="card card2">
                        <img src="./img/pic8.jpg" alt="">
                        <div class="con">pictures</div>
                    </li>
                    <li class="card card3">
                        <img src="./img/pic9.jpg" alt="">
                        <div class="con">pictures</div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="jquery.js"></script>
    <script>
		$('.stacks-cards').on('click',function(e){
    		$(this).toggleClass('transition');
		});
	</script>

css部分

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
body{
    height: 680px;
    background: linear-gradient(to left top,#f5a1d5 0% ,#cdd3e9) ;
}
.stacks-cards{
    width: 600px;
    margin: 50px auto;
    /* border: 1px solid black; */
    position: relative;
    cursor: pointer;
}
.stack{
    transition: all 0.8s cubic-bezier(0.63,0.15,0.03,1.22);
    position: absolute;
    left: 0;
}
.stack .card1{
    z-index:10;
    transform: rotateZ(-2deg);
}
.stack .card2{
    z-index:9;
    transform: rotateZ(7deg);
}
.stack .card3{
    z-index:8;
    transform: rotateZ(5deg);
}
.card{
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background-color: #fff;
    padding: 5px;
    /* float: left; */
    box-shadow: 1px 2px 2px 0px #aaa;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.8s cubic-bezier(0.63,0.15,0.03,1.22);
}
.card img{
    width: 200px;
    height: 150px;
    border-radius: 10px;
}
.card .con{
    font-size: 20px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 5px 10px;
}
.transition .stack1{
    left: 0px;
}
.transition .stack2{
    left: 220px;
}
.transition .stack3{
    left: 440px;
}
.transition .card{
    transform: rotateZ(0deg);
}
.transition .card1{
    top: 440px;
}
.transition .card2{
    top: 220px;
}