CSS3卡翻转和扩展

Question

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

这是我尝试使用的小提琴，但是我没有基本的翻转功能： https : //jsfiddle.net/4dazznb5/

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

 .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; } 

 <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> 

Answer 1

由于Tambo的背面更好（允许html内容），因此我将其与我们的答案进行了混合（ 在Mozilla和Chrome上成功进行了测试 ）：

 $('.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'); } }); 

 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; } 

 <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> 

Answer 2

只需在新的“翻转”类属性上添加!important即可覆盖旧属性。 javascript行$( ".item" ).not( this ).addClass( 'off' )会在选中其他卡片$( ".item" ).not( this ).addClass( 'off' )移除。 absolute位置让一切都在原地。 活动卡具有较高的z索引，以确保其他卡不会激活“ 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过渡

 // 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); 

 :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; } 

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