Flashcard Rotation

flashcard-rotation.markdown

Flashcard Rotation

Hover over the white circles to reveal the magic letters.

A Pen by Simon on CodePen.

License.

index.html

 <a target="_blank" href="https://github.com/Ssenseii">
                        <div class="display__items-element bit">
                            <button id="btnI1" class="bit__button">A</button>
                            <button id="btnB" class="bit__button">B</button>
                            <button id="btnI2" class="bit__button">C</button>
                            <button id="btnT" class="bit__button">D</button>
                        </div>
                    </a>

script.js

var btnI1 = document.getElementById("btnI1");
btnI1.addEventListener("mouseover", function () {
    btnI1.classList.toggle("rotateBit");
})


var btnI2 = document.getElementById("btnI2");
btnI2.addEventListener("mouseover", function () {
    btnI2.classList.toggle("rotateBit");
})

var btnB = document.getElementById("btnB");
btnB.addEventListener("mouseover", function () {
    btnB.classList.toggle("rotateBit2");
})

var btnT = document.getElementById("btnT");
btnT.addEventListener("mouseover", function () {
    btnT.classList.toggle("rotateBit");
})

style.css

a{
  text-decoration: none;
}

.bit{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;

    background-color: #000;
    height: 10rem;
}

.bit__button{
        height: 4rem;
        width: 4rem;

        border: 2px solid white;
        border-radius: 5px;
        background-color: transparent;

        font-family: 'video';
        font-size: 48px;

        transform: rotateY(0deg);
        transition: transform 1s;
}

.bit__button:hover{
          cursor: pointer;
    }


.rotateBit{
    background-color: white;
    transform: rotateY(360deg);
    transition: transform 0.5s;
}
.rotateBit2{
    background-color: white;
    transform: rotateY(360deg);
    transition: transform 1s;
}