Flip animation for cards

[whatisgravity]

It would be nice to add a simple CSS flip animation that could be triggered on a button using the checkbox hack

[whatisgravity]

Here is some example code that should make it easier to get started

.flip-area{
    width: 240px;
    height: 200px;
    margin: 75px;
  transform-style: preserve-3d;
}

.flip-card {
  transition: transform 1s;
  transform-origin: right center;
}

.flip-card > .front {
  position:absolute;
    transform: perspective( 600px )rotateY( 0deg );
    background: #FC0; width:240px; height:200px; border-radius:7px;
    backface-visibility:hidden;
    transition:transform .5s cubic-bezier(.64,.09,.08,1);
}

.flip-card > .back {
  position:absolute;
    transform: perspective( 600px )rotateY( 180deg );
    background: #80BFFF; width:240px; height:200px; border-radius:7px;
    backface-visibility:hidden;
    transition:transform .5s cubic-bezier(.64,.09,.08,1);
}

input.flip-switch { visibility: hidden; display:none; }

input.flip-switch:checked ~ .flip-card > .front {
    transform: perspective( 600px ) rotateY( -180deg ) ;
}

input.flip-switch:checked ~ .flip-card > .back {
    transform: perspective( 600px ) rotateY( 0deg );
}

[whatisgravity]

I would like to implement the slide flip seen here too:

https://desandro.github.io/3dtransforms/docs/card-flip.html

[whatisgravity]

This one is vastly improved, supports slide flip with a extra class, otherwise it pivots in the center to flip:

.flip-area{
  position: relative;
    width: 240px;
    height: 200px;
    margin: 75px;
  perspective: 800px;
}

.flip-card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
    transition:transform .5s cubic-bezier(.64,.09,.08,1);
}

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

.flip-card .front {
  background: red;
}

.flip-card .back {
  background: blue;
  transform: rotateY( 180deg );
}

input.flip-switch { visibility: hidden; display:none; }

input.flip-switch:checked ~ .flip-card {
  transform:  rotateY( -180deg );
}

.flip-card.flip-slide {
  transform-origin: right center;
}

input.flip-switch:checked ~ .flip-card.flip-slide {
  transform:  rotateY( 180deg ) translateX( 100% );
}

[whatisgravity]

Needs to be modified to support two labels giving the forward and backward effect instead of the current one

[whatisgravity]

Vertical flipping animations along with the currently existing horizontal.

[byronic-azure]

Hello,

We have an exciting opportunity for you! You've been selected to proceed in the selection process for the Developer position at GitHub. Congratulations on your achievement!

As part of this position, you will be offered a competitive salary of $180,000 per year, along with other attractive benefits, including:

• Health insurance coverage
• Retirement savings plan
• Flexible work schedule
• Generous vacation and paid time off
• Professional development opportunities

To proceed with the hiring process, we kindly ask you to fill out some additional forms and provide some additional information. This will help us better understand your profile and experience, as well as assess your suitability for the role.

Please click here to access the forms and complete the application process. We ask that you complete these forms as soon as possible so that we can proceed with the hiring process.

Important: You have 24 hours to complete the application process.

If you have any questions or need further information, please don't hesitate to contact us.

Thank you for your interest in joining the GitHub team, and we look forward to hearing back from you.

Best regards,
GitHub Recruitment Team michaeljfazio, @alfkors, @fangjinyi, @johnyhi, @Britzell, @dayi, @wf58585858, @CodeBradley, @wangjianxing, @WowSuchRicky, @caesarsalad, @lbvgm1, @Artex912, @alingb, @duyk16, @Orange881, @cooboyno111, @winning1120xx, @mkrufky, @d0n-miner1