Skip to content

Instantly share code, notes, and snippets.

/index.html

Created February 6, 2018 19:40
Show Gist options
  • Save anonymous/980963b921f168920a99b2099e14db9c to your computer and use it in GitHub Desktop.
Save anonymous/980963b921f168920a99b2099e14db9c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Feb 6, 2018.
    116 changes: 116 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,116 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style id="jsbin-css">
    html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    }

    body {
    perspective: 800;
    }

    .card {
    font-family: sans-serif;
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
    }
    .card .content {
    color: white;
    font-size: 10em;
    display: inline-block;
    width: 100%;
    text-align: center;
    padding-top: 40%;
    height: 80%;
    width: 80%;
    left: 10%;
    position: absolute;
    border-radius: 20px;
    backface-visibility: hidden;
    }
    .card .content.front {
    background: steelblue;
    }
    .card .content.back {
    background: lightgreen;
    transform: rotateY(180deg);
    }
    .card.flipped {
    transform: rotateY(180deg);
    }

    </style>
    </head>
    <body>
    <div class="card">
    <div class="content front">も</div>
    <div class="content back">Mo</div>
    </div>
    <script id="jsbin-javascript">
    var card = document.querySelector(".card");
    card.addEventListener("click", (e)=>{
    card.classList.toggle("flipped");
    });
    </script>


    <script id="jsbin-source-css" type="text/css">html,body{
    margin: 0;
    padding: 0;
    height: 100%;
    }
    body{
    perspective: 800;
    }

    .card{

    font-family: sans-serif;

    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;

    .content{
    color: white;
    font-size: 10em;
    display: inline-block;
    width: 100%;
    text-align: center;
    padding-top: 40%;
    height: 80%;
    width: 80%;
    left: 10%;
    position: absolute;
    border-radius: 20px;
    backface-visibility: hidden;
    &.front{
    background: steelblue;
    }
    &.back{
    background: lightgreen;
    transform: rotateY( 180deg );
    }
    }

    &.flipped{
    transform: rotateY( 180deg );
    }
    }</script>

    <script id="jsbin-source-javascript" type="text/javascript">var card = document.querySelector(".card");
    card.addEventListener("click", (e)=>{
    card.classList.toggle("flipped");
    });</script></body>
    </html>
    42 changes: 42 additions & 0 deletions jsbin.xuqurakipi.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    }

    body {
    perspective: 800;
    }

    .card {
    font-family: sans-serif;
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
    }
    .card .content {
    color: white;
    font-size: 10em;
    display: inline-block;
    width: 100%;
    text-align: center;
    padding-top: 40%;
    height: 80%;
    width: 80%;
    left: 10%;
    position: absolute;
    border-radius: 20px;
    backface-visibility: hidden;
    }
    .card .content.front {
    background: steelblue;
    }
    .card .content.back {
    background: lightgreen;
    transform: rotateY(180deg);
    }
    .card.flipped {
    transform: rotateY(180deg);
    }
    4 changes: 4 additions & 0 deletions jsbin.xuqurakipi.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    var card = document.querySelector(".card");
    card.addEventListener("click", (e)=>{
    card.classList.toggle("flipped");
    });