*{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}


.container1{
  padding: 30px 0px 30px 20px;
  display: flex;
  position: relative;
}

.container1 .card1 {
  width: 120px;
  height: 120px;
  box-shadow: -20px 0px 30px #000;
  border-radius:16px;
  overflow: hidden;
  background: linear-gradient(85deg, #434343, #252525);
  transform: all .3s ease-in-out;
  margin-left: 400px;
}

.container1 .card1 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 除了第一张，其他图片向左移动30px,呈现一个折叠效果 */
.container1 .card1:not(:first-child){
  margin-left: -40px;
}

.container1 .card1:hover{
  transform: translateY(-1rem) rotate(3deg);
}

.container1 .card1:first-child:hover {
  transform: translate(-0.5rem, -1rem) rotate(3deg);
}
/* ~ ：同级向下查找，即当前。card的兄弟card */
.container1 .card1:hover~.card {
  transform: translateX(50px);
}

.card1 p{
  font-size: 29px;

  color: #8F8F8F;
}