CSS3卡翻转和扩展

Question

我试图在容器中拥有一组牌/ div。单击卡片/ div时，它应该水平翻转并展开以占据容器内的整个空间（基本上将卡片/ div的大小更改为100％x 100％）。我不确定这是否可行，因为我在那里看到的所有例子通常都涉及卡/ div保持相同的大小。

这是我尝试过的小提琴，但我无法获得基本的翻转功能：https://jsfiddle.net/4dazznb5/

＆＃13;

＆＃13;

$('.card').click(function(){
  $(this).addClass('flipped').mouseleave(function(){
    $(this).removeClass('flipped');
  });
  return false;
});

＆＃13;

.cards {
  width: 100%;
  height: 100%;
  background: gray;
  padding: 10px;
  box-sizing: border-box;
  
  position: relative;
  -webkit-perspective: 800;
  perspective: 800;
}

.cards .card {
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}

.flip .card .face {
  width: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ;
  z-index: 2;
}

.flip .card .front {
  position: absolute;
  z-index: 1;
  background: black;
}

.flip .card .back {
  -webkit-transform: rotatex(-180deg);
  background: white;
}

.cards .card.flipped {
  -webkit-transform: rotatex(-180deg);
}

.card {
  width: 100%;
  background: lightgray;
  padding: 6px;
  margin: 10px 0;
  box-sizing: border-box;
  
  cursor: pointer;
  
  position: relative;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card:nth-of-type(1) {
  margin-top: 0;
}

.card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  backface-visibility: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 400px; height: 600px;">
  <div class="cards">
    <div class="card">
      <div class="face front">Card 1 Front</div>
      <div class="face back">Card 2 Back</div>
    </div>
    <div class="card">
      <div class="face front">Card 2 Front</div>
      <div class="face back">Card 2 Back</div>
    </div>
    <div class="card">
      <div class="face front">Card 3 Front</div>
      <div class="face back">Card 3 Back</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于Tambo's背面更好（允许html内容），我将这个混合与我们的答案（在Mozilla和Chrome 上成功测试）：

＆＃13;

＆＃13;

$('.card').click(function(){  
 
  if (!$(this).hasClass("flipped")) {
  $( ".face" ).addClass( 'off' );
  $( this ).children( ".face" ).removeClass( 'off' );
  $( this ).parent( ".cards" ).addClass( 'big' );
  $( this ).addClass('flipped');

  } else {
 
  $( ".face" ).removeClass( 'off' );
  $( ".cards" ).removeClass( 'big' );
  $( this ).removeClass('flipped'); 
}
  

});

＆＃13;

body {
height:100vh;
width:100vw;
margin:0px;
}

#container {
position: relative;
background: skyblue;
height:100%;
width:60%;
overflow: hidden;
margin:auto;
}

.off {
  color: rgba(0, 0, 0, 0.0) !important;
  background: rgba(230, 230, 250, 0.0) !important;
  -webkit-transition: all 2s; /* Safari */
  transition: all 2s;
}

.cards {
  -webkit-perspective: 900px;
  -moz-perspective: 900px;
  perspective: 900px;
  width: 80%;
  height: 20%;
  position: absolute;
  -webkit-transition: all 1s; /* Safari */
  transition: all 1s;
  margin-left: 10%;
  margin-right: 10%;
 }
 
.cards .card.flipped {
  -webkit-transform: rotatex(-180deg);
  -moz-transform: rotatex(-180deg);
  transform: rotatex(-180deg);
  height: 100%;
  z-index: 100;
}

.cards .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 1s; /* Safari */
  transition: all 1s;
}

.cards .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ;
  -moz-backface-visibility: hidden ;
  backface-visibility: hidden ;
  z-index: 2;
  font-size: 2em;
  font-family: arial, sans-serif;
  text-align: center;
  -webkit-transition: all 0.5s; /* Safari */
  transition: all 0.5s;
}

.cards .card .front {
  position: absolute;
  background: tomato;
  z-index: 1;
}

.cards .card .back {
  -webkit-transform: rotatex(-180deg);
  -moz-transform: rotatex(-180deg);
  transform: rotatex(-180deg);
  background: gold;
}

.cards .card .front,
.cards .card .back{
  cursor: pointer;
}

.big {
height:100%;
width:100%;
top: 0% !important;
margin-left: 0%;
margin-right: 0%;
z-index:100;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>

<div class=cards style="top:0px"> 
<div class=card> 
   <div class="face front"> 
      Card 1 Front
    </div> 
    <div class="face back"> 
      Card 1 Back
    </div> 
  </div> 
</div> 

<div class=cards style="top:25%"> 
    <div class=card> 
    <div class="face front"> 
      Card 2 Front
    </div> 
    <div class="face back"> 
      Card 2 Back
    </div> 
  </div> 
</div>

 <div class=cards style="top:50%"> 
   <div class=card> 
    <div class="face front"> 
      Card 3 Front
    </div> 
    <div class="face back"> 
      Card 3 Back
    </div> 
  </div> 
</div>

<div class=cards style="top:75%">
   <div class=card> 
    <div class="face front"> 
      Card 4 Front
    </div> 
    <div class="face back"> 
      Card 4 Back
    </div> 
  </div> 
</div> 

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将!important添加到新的'翻转'类属性中，就会覆盖旧的属性。当选择一个时，javascript行$( ".item" ).not( this ).addClass( 'off' )会删除其他卡片。 absolute位置让一切都在其位置上。活动卡具有更高的z-index以确保其他卡不会激活“mouseleave”触发器。 更新：最终在Mozilla和Chrome上100％工作。 ps：点击一下即可打开卡片，再点击一下即可关闭它。

$('.item').click(function(){  
 
  if (!$(this).hasClass("flipped")) {
  $( ".item" ).not( this ).addClass( 'off' );
  $( this ).addClass('flipped');

  } else {
 
  $( ".item" ).removeClass( 'off' );
  $( this ).removeClass('flipped'); 
}
  

});

.off {
  color: rgba(0, 0, 0, 0.0) !important;
  background: rgba(230, 230, 250, 0.0) !important;
}

.cards {
  width: 100%;
  height: 100%;
  background: lavender;
  position: relative;
  -webkit-perspective: 900px;
  perspective: 900px;
}

.flipped {
  top: 0% !important;
  height: 100% !important;
  width: 100% !important;
  -webkit-transform: rotatex(-180deg);
  transform: rotatex(-180deg);
  -webkit-transition: all 1s; /* Safari */
  transition: all 1s;
  color: rgba(0, 0, 0, 0.0);
  z-index:100;
  -webkit-transform-style: preserve-3d;
  background: tomato;
}

.flipped:after {
  content: 'More text on here.';
    right: 0px;
    bottom: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
  color: rgba(0, 0, 0, 1.0);
  -webkit-transform: rotatex(-180deg);
  transform: rotatex(-180deg);
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  background: gold;
}

.card {
  height: 22%;
  width: 100%;
  box-sizing: border-box;  
  cursor: pointer;  
  -webkit-transition: all 1s; /* Safari */
  transition: all 1s;
  display: block;
  position: absolute;
  background: tomato;
}

.aaa {
top:0%;  
}

.bbb {
top:26%;  
}

.ccc {
top:52%;  
}

.ddd {
top:78%;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 400px; height: 600px;">
  <div class="cards">
    <div class="card item aaa">
      <div class="face front">Some text on here.</div>
    </div>
    <div class="card item bbb">
      <div class="face front">Some text on here.</div>
    </div>
      <div class="card item ccc">
      <div class="face front">Some text on here.</div>
    </div>
      <div class="card item ddd">
      <div class="face front">Some text on here.</div>
    </div>
  </div>
</div>

Answer 3

只需使用Element.classList和CSS transitions

即可

＆＃13;

＆＃13;

// Function to flip the card and expand the content 
function flipMe() {
  console.log(this.innerHTML);
  var card = this.querySelector('.card');
  card.classList.add('flipped');
  // this handler will be executed every time the cursor is moved off the card
  card.addEventListener("mouseout", function( event ) {   
    this.classList.remove('flipped');
  }, false);
}
// Define our variables
var cardWrapper = document.querySelector('.cardWrapper');
 

cardWrapper.addEventListener("click", flipMe, false);

＆＃13;

:root {
 background: #CAC8CC;
}
.cardWrapper {
  -webkit-perspective: 800;
  -moz-perspective: 800;
  perspective: 800;
  width: 400px;
  height: 300px;
  position: relative;
  margin: 100px auto;
}
.cardWrapper .card.flipped {
  -webkit-transform: rotatex(-180deg);
  -moz-transform: rotatex(-180deg);
  transform: rotatex(-180deg);
  height: 100%;
}
.cardWrapper .card {
  width: 100%;
  height: 100px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  transition: .5s;
}
.cardWrapper .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ;
  -moz-backface-visibility: hidden ;
  backface-visibility: hidden ;
  z-index: 2;
  font-size: 4em;
  text-align: center;
}
.cardWrapper .card .front {
  position: absolute;
  background: black;
  color: white;
  z-index: 1;
}
.cardWrapper .card .back {
  -webkit-transform: rotatex(-180deg);
  -moz-transform: rotatex(-180deg);
  transform: rotatex(-180deg);
  background-color: #0095ff;
}
.cardWrapper .card .front,
.cardWrapper .card .back{
  cursor: pointer;
}

＆＃13;

<div class=cardWrapper> 
  <div class=card> 
    <div class="face front"> 
      Card 1 Front
    </div> 
    <div class="face back"> 
      Card 1 Back
    </div> 
  </div> 
</div> 

＆＃13;

＆＃13;

＆＃13;