正面和背面的翻转效果

我想创建一个翻页效果，在鼠标悬停时触发，并在鼠标悬停时翻转回前面板。所以必须有一张正面和背面的卡片翻转： HTML：正面和背面的翻转效果

<div class="card"> 
    <div class="front"> Front-Content </div> 
    <div class="back"> Back-Content </div> 
</div> 

<div class="card"> 
    <div class="front"> 2nd Front-Content </div> 
    <div class="back"> 2nd Back-Content </div> 
</div>

因此，大家可以看到我想要多张卡片翻转他们背两面鼠标悬停。我认为解决方案会切换一个CSS3动画的类来通过jQuery翻转（rotateY），但我没有得到它的工作。

问候戴夫

来源

2014-09-25 iD4ve

背前翻页效果可以通过CSS来实现，试试这个： http://davidwalsh.name/css-flip

来源

2014-09-25 09:53:55

这帮助！ :) 我已经改变了一些代码，现在它做我想要的！谢谢！ JSFIDDLE：http://jsfiddle.net/dwiedave/ks452xeh/ – iD4ve 2014-09-25 10:28:07

干得好的朋友，好:) – 2014-09-25 10:31:20

.card-container{ 
 
    width: 100px; 
 
    perspective : 1000px; 
 
    -webkit-perspective : 1000px; 
 
} 
 
.card{ 
 
    position : relative; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin-bottom: 10px; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.front{ 
 
    background-color: #f00; 
 
    height : 100px; 
 
    width : 100px; 
 
    position: absolute; 
 
    top : 0; 
 
    left : 0; 
 
    z-index : 3; 
 
    transform : rotate(0deg); 
 
    -moz-transform : rotate(0deg); 
 
    transition : 1s transform; 
 
    transform-style: preserve-3d; 
 
    backface-visibility: hidden; 
 
} 
 

 
.back{ 
 
    background-color: #00f; 
 
    height: 100px; 
 
    width : 100px; 
 
    position : absolute; 
 
    top : 0; 
 
    left : 0; 
 
    z-index : 1; 
 
    transform : rotateY(-180deg); 
 
    -moz-transform : rotateY(-180deg); 
 
    transition : 1s transform; 
 
    transform-style: preserve-3d; 
 
    backface-visibility: hidden; 
 
} 
 
.card-container:hover .front{ 
 
    transform : rotateY(180deg); 
 
    -moz-transform : rotateY(180deg); 
 
} 
 
.card-container:hover .back{ 
 
    transform : rotateY(0deg); 
 
    -moz-transform : rotateY(0deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div class="card-container"> 
 
    <div class="card"> 
 
     <div class="front"> Front-Content </div> 
 
     <div class="back"> Back-Content </div> 
 
    </div> 
 
</div> 
 
<div class="card-container"> 
 
    <div class="card"> 
 
     <div class="front"> 2nd Front-Content </div> 
 
     <div class="back"> 2nd Back-Content </div> 
 
    </div> 
 
</div>

请找到你的解决方案 over here

来源

2014-09-25 10:22:37

正面和背面的翻转效果

回答

相关问题