需要幫助翻轉css3中的div

我想將div從前側垂直翻轉到後側然後恢復它。但是當我懸停而不是翻轉時，它被摺疊成一個細條。問題是什麼？ [水平翻轉正在發生fine.Problem當我改成了垂直翻轉]需要幫助翻轉css3中的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>

來源

2013-08-01 Insane Coder

簡單地讓所有的rotateY S爲rotateX s，並確保對類vertical添加到容器（因爲你有它在你的CSS而不是HTML）

Working demo

更改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-01 15:31:04

THX，有用的答案補充完整的功能！ –

您的鏈接已損壞。 – www139

@ www139它適用於我 –

需要幫助翻轉css3中的div

回答

相關問題