5

divを前面から背面に垂直に反転させてから復元しようとしています.しかし、反転する代わりにホバーすると、薄いストリップに折りたたまれます.問題は何ですか? 【左右反転は問題なくできていましたが、上下反転に変更したら不具合が発生しました】

<html>
<head>
<style type="text/css">

    /* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateX(180deg);
    }

.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 {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

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

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
    background-color:green; 
}
.vertical.flip-container {
    position: relative;
}

    .vertical .back {
        transform: rotateX(180deg);
    }

    .vertical.flip-container .flipper {
        transform-origin: 100% 213.5px; /* half of height */
    }

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

</head>
<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            Front Side
        </div>
        <div class="back">
            Back Side
        </div>
</div>
</div>
</body>
</html>
4

1 に答える 1

5

単純にすべてのrotateYを s にrotateXして、必ずクラスverticalをコンテナに追加してください (CSS にはあるが HTML にはありません)。

ワーキングデモ

変更された HTML

<div class="vertical flip-container" ontouchstart="this.classList.toggle('hover');">

更新された 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);
}

CSS3 アニメーションも使用してすべての機能を追加しました

于 2013-08-01T15:31:04.763 に答える