5、css实现图片展示翻页效果

效果展示：

遮照层

// html代码

 <div class="container">
    <div class="box">
            <div class="mask">
            遮照层
                <!-- <div class="intro">内容介绍</div> -->
            </div>
            <div class="pic">
            <img src="http://img4.imgtn.bdimg.com/it/u=1028120364,2465714686&fm=11&gp=0.jpg" alt="图片1">
            </div>
    </div>
 </div>

// css代码

 .container{
        position:relative;
        display: flex;
        width: 100%;
        height: 300px;
        justify-content: center;
        align-items: center;
   }
   .container .box{
       position: absolute;;
       top:0;
       width: 200px;
       height:200px;
       background:#ff0;
       overflow:hidden;
   }
   .container .pic img{
      position:absolute;
      top:0;
       width:100%;
       height:100%;
       background:#f00;
   }
  .container .mask{
       position: absolute;;
       top:0;
       width:100%;
       height:100%;
       background: rgba(0,0,0,0.3);
       z-index:1;
       cursor:pointer;
       transition: transform 2s;
   }
    .container .mask:hover{
       background: rgba(0,0,0,0.4);
       transform: translateX(-100%) translateY(-100%);
    }