标签: card-flip

我正在尝试翻转CSS卡以在所有浏览器上正常工作。我已经将它用于除Safari之外的所有功能。我使用了以下代码：

/* entire container, keeps perspective */
.flip-container {
     perspective: 1000;
     transform-style: preserve-3d;
     display: inline-block;
}

/*  UPDATED! flip the pane when hovered */
.flip-container:hover .back {
     transform: rotateY(0deg);
}
.flip-container:hover .front {
    transform: rotateY(180deg);
    backface-visibility: hidden; 
}

.flip-container, .front {
     width: 250px;
     height: 250px;
}

.flip-container, .back {
     width: 250px;
     height: 250px;
}

 /* flip speed goes here */
 .flipper {
     transition: 0.6s;
     transform-style: preserve-3d;
     position: relative;
}

 /* hide back of pane during swap */
.front, .back { …