틀:3D 회전 카드/styles.css

/* 3D 회전 카드 */
.threed-rotate {
  display: inline-block;
  overflow: hidden;
  border-radius: 15px;
  width: 220px;
  height: 370px;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 20px;
  opacity: 0.5;
  transform: rotateY(0deg) scale(0.8); 
  transition: 0.8s ease-out;
}

.threed-rotate:hover {
  transition: 1.2s ease;
  transform: rotateY(360deg) scale(0.95); 
  opacity: 1;
}

.threed-rotate img {
  position: relative;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}

.threed-rotate:nth-child(even) {
          margin-right: -2px
}

@media screen and (max-width: 768px) {
.threed-rotate {
  display: inline-block;
  overflow: hidden;
  border-radius: 15px;
  max-width: 170px; 
  width: 100%;
  height: 350px;
  margin-top: 10px;
  margin-bottom: -10px;
  opacity: 0.5;
  transform: rotateY(0deg) scale(0.8); 
  transition: 0.8s ease-out;
}

.threed-rotate:hover {
  transition: 1.2s ease;
  transform: rotateY(360deg) scale(0.95); 
  opacity: 1;
}

.threed-rotate img {
  position: relative;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}

.threed-rotate:nth-child(odd) {
          margin-left: -2px
}
}