需要帮助在css3中翻转div-NeedHelptoflipthedivincss3

4  

Simply make all the rotateYs be rotateXs and make sure to add the class vertical to the container (since you have it in your CSS but not HTML)

只需将所有的rotateYs设置为rotateXs，并确保将类垂直地添加到容器中(因为在CSS中有它，而不是HTML中)

Working demo

演示工作

Changed HTML

改变了HTML

Updated CSS

更新的CSS

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000px;
}

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

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

/* hide back of pane during swap */
.front, .back {
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

/* front pane, placed above back */
.front {
    z-index: 1;
    background-color:red;
}

/* back, initially hidden pane */
.back {
    transform: rotateX(-180deg);
    background-color:green; 
    animation: toFront 0.3s linear normal forwards;
}
.vertical.flip-container {
    position: relative;
}
.vertical.flip-container:hover .back {
    animation-delay: 0.3s;
    animation: toBack 0.3s linear normal  forwards;
}
@keyframes toBack {  
  0% {z-index:0;}
  100% {z-index:1;}
}
@keyframes toFront {
  0% {z-index:1;}
  100% {z-index:0;}
}
.vertical.flip-container .flipper {
    transform-origin: 100% 240px; /* half of height */
}

.vertical.flip-container:hover .flipper {
    transform: rotateX(-180deg);
}

I added full functionality using CSS3 animations as well

我还使用CSS3动画添加了完整的功能