@import '../css/index.css';

/* 饼干列表 */
#list-box {
  /* width: 80%; */
  /* min-width: 540px; */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 24%;
  transform: translateX(-50%);
}

/* #list-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
} */

#list-box li {
  width: 10vw;
  height: 10vw;
  margin: 2%;
  border-radius: 50%;
  cursor: pointer;
  /* background: url('./images//cookie.png') center no-repeat; */
  background-size: cover;
}
#list-box li img {
  width: 100%;
  display: block;
}

/* 饼干翻转动画 */
.turnover {
  animation: turnover 0.6s linear forwards;
}
@keyframes turnover { 
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(180deg);
  }
}

/* 饼干翻回 */
.turnover-rem {
  animation: turnoverRem 0.6s linear forwards;
}
@keyframes turnoverRem {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0);
  }
}