animation for this card folding using tweenjs

[code0n]

I want to do the same animation for bending card but unable to do so using css and border-radius property. Is there any property or method by which we can make it happen.. Plz help me regarding it..

Edited November 29, 2018 by code0n

[mattstyles]

Not sure you'll ever get there with CSS, that looks like a 3D game where the vertices of the card are actually moving and the renderer works out the rest.

CSS transforms could get you close with trickery with how many elements you use to represent a card, but it'll never be great. Happy to be proved wrong but CSS transforms just don't work like that to do the stretching and transforming you see in the video.

Actually, maybe there is a way.

Use lots and lots of elements to define the fold area, then transform each one by an increasing amount, i.e. first one (closest to body of card) rotates and transforms only a little bit, each subsequent one after it (until you reach the corner) moves a little farther, and its additive so there would be a nice concise algorithm that could give you how much to move each piece. Once you have an algorithm just keep increasing the number of elements until you get something that is smooth enough. It won't be perfect but it might be good enough to work.

[rohini]

HTML Code:

<div class="cardWrapper">

<div class="card">

<div class="cardFace front"><h1>front</h1></div>

<div class="cardFace back"><h1>back</h1></div>

</div>

</div>

 

<div class="cardWrapper">

<div class="card">

<div class="cardFace front"><h1>front</h1></div>

<div class="cardFace back"><h1>back</h1></div>

</div>

</div>

 

<div class="cardWrapper">

<div class="card">

<div class="cardFace front"><img src="https://s.cdpn.io/16327/logo_texture.jpg"></div>

<div class="cardFace back"><img src="https://s.cdpn.io/16327/logo_robust.jpg"></div>

</div>

</div>

 

<div class="cardWrapper">

<div class="card">

<div class="cardFace front"><h1>front</h1></div>

<div class="cardFace back"><h1>back</h1></div>

</div>

</div>

 

<div class="cardWrapper">

<div class="card">

<div class="cardFace front"><h1>front</h1></div>

<div class="cardFace back"><div class="moreInfo">This is just an example of how you can customize the content of any card face.</div></div>

</div>

</div>

 

CSS Code:

body {background-color: black;margin:20px; font-family:Arial, sans-serif;}

 

.cardWrapper{ width:200px;height:200px;position:relative; float:left;margin-right:10px;cursor:pointer; -webkit-font-smoothing:antialiased;}

.cardFace{position:absolute;width:200px;height:200px;overflow:hidden;}

.front{background-color:#333; }

.back{background-color:#333; }

.cardFace h1{margin:0px;font-size:30px;padding:10px 0px 10px 10px;border-bottom:solid 6px #aaa;border-top:solid 6px #aaa;background-color:black;color:white;}

.cardFace.back h1{border-color:#91e600;}

.moreInfo{padding:10px;color:white;line-height:24px;}

 

Tween js Code:

<script>

TweenLite.set(".cardWrapper", {perspective:800});

TweenLite.set(".card", {transformStyle:"preserve-3d"});

TweenLite.set(".back", {rotationY:-180});

TweenLite.set([".back", ".front"], {backfaceVisibility:"hidden"});

 

$(".cardWrapper").hover(

  function() {

    TweenLite.to($(this).find(".card"), 1.2, {rotationY:180, ease:Back.easeOut});

  },

  function() {

    TweenLite.to($(this).find(".card"), 1.2, {rotationY:0, ease:Back.easeOut}); 

  }

);

 

TweenMax.staggerTo($(".card"), 1, {rotationY:-180, repeat:1, yoyo:true}, 0.1);

</script>