影像交換3D轉換翻轉

Question

http://jsfiddle.net/RtTPU/

我想交換圖像「亞當」到「亞當 - 翻轉」上懸停，但它不是加工。是否有可能完全在CSS中完成？

<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
    <div class="flipper"> 
     <div class="front"> 
      <img src="http://adamginther.com/assets/img/adam.jpg" alt="Adam"> 
     </div> 
     <div class="back"> 
      <img src="http://adamginther.com/assets/img/adam-flipped.jpg" alt="Adam" > 
     </div> 
    </div> 
</div> 


.self-portrait { 
    border-radius: 400px; 
    width: 50%; 
} 


/* entire container, keeps perspective */ 
.flip-container { 
    perspective: 1000; 
} 
    /* flip the pane when hovered */ 
    .flip-container:hover .flipper, .flip-container.hover .flipper { 
     transform: rotateY(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; 
} 

/* back, initially hidden pane */ 
.back { 
    transform: rotateY(180deg); 
} 

Answer 1

我想這裏是你想要的。 fiddle

.flip-container:hover .back{ 
    z-index : 10; 
} 
.back{ 
    z-index:0; 
} 

Answer 2

您需要transform屬性的前綴。

而且.flip-container.hover沒用了，需要看單位：

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

corrected fiddle

Answer 3

您的代碼不起作用，因爲它缺乏爲transform和backface-visibility前綴。另外，您必須告訴.flipper的孩子保留應用於其上的3d變形並通過transform-style: preserve-3d（需要前綴）自動計算組合效果。

第二個問題：您必須在.flip-container或.flipper上設置明確的width以確保圖像圍繞中心y軸翻轉。儘管如此，將它放在auto上會導致不同屏幕尺寸的不同水平的奇特性。

請注意，爲了簡潔，我的代碼示例僅包含webkit前綴。希望這可以得到重點。

相關變化：

.flip-container { 
    ... 
    width: 400px; 
    height: 400px; 
} 

.flip-container:hover .flipper { 
    -webkit-transform: rotateY(180deg); 
} 

.flipper { 
    ... 
    -webkit-transform-style: preserve-3d; 
    height: 100%; 
    width: 100%; 
} 

.front, .back { 
    ... 
    -webkit-backface-visibility: hidden; 
} 

.back { 
    -webkit-transform: rotateY(180deg); 
} 

查看所有在您小提琴的固定版本的變化：http://jsfiddle.net/marionebl/RtTPU/6/

版本與更簡潔的標記和消毒CSS樣式：http://jsfiddle.net/marionebl/6Je6r/1/