card-flip

The <card-flip> element needs to contain two elements with a side attribute, front and back. The width and height attribute have 100% and 200px as default values, change them to suit your needs.

`.flip()`

The .flip() method triggers a flip.

code

<button id="flip-btn" style="margin-bottom: 1em">Flip</button>
<card-flip width="220px" height="300px" id="flip-me">
  <div side="front">
    <img src="./card-back.svg" title="card back">
  </div>
  <div side="back">
    <img src="./card-front.svg" title="card front">
  </div>
</card-flip>
<script>
  document.getElementById("flip-btn")
  .addEventListener(
    "click",
    () => document.getElementById("flip-me").flip(),
  );
</script>

Flip on click

To flip the card on click add the flip-on-click attribute.

code

<card-flip width="220px" height="300px" flip-on-click="">
  <div side="front">
    <img src="./card-back.svg" title="card back">
  </div>
  <div side="back">
    <img src="./card-front.svg" title="card front">
  </div>
</card-flip>

Duration

Set how long the card takes to flip with the duration attribute.

code

<card-flip width="220px" height="300px" flip-on-click="" duration="1.5s">
  <div side="front">
    <img src="./card-back.svg" title="card back">
  </div>
  <div side="back">
    <img src="./card-front.svg" title="card front">
  </div>
</card-flip>

Content

The sides can have any content.

      code
      
        <card-flip flip-on-click="">
  <div side="front" style="background-color: steelblue; color: white; text-align: center">
    <h2>Front</h2>
  </div>
  <div side="back" style="background-color: indianred; color: white; text-align: center">
    <h2>Back</h2>
  </div>
</card-flip>

    Front
  
    Back