Lyric Play examples

Using http://dropthebit.com/demos/fancy_input/fancyInput.html

by Umar

HTML

<div id="container">
    <button id="turn">Turn</button>
    <div id="cube-container">
        <div id="cube">
    
            <div id="top-face">
                <p>This is the top face</p>
            </div>
            
            <div id="front-face">
                <p>This is the front face</p>
            </div>
            <!--
            <div id="left-face">
                <p>This is the left face</p>
            </div>
        
            <div id="back-face">
                <p>This is the back face</p>
            </div>     
        
            <div id="right-face">
                <p>This is the right face</p>
            </div>     
            -->
        </div>
    </div>
    
</div>

CSS

@font-face {
  font-family: 'Fjalla One';
  font-style: normal;
  font-weight: 400;
  src: local('Fjalla One'), local('FjallaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/fjallaone/v1/rxxXUYj4oZ6Q5oDJFtEd6hsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

body {
    font-family:'Fjalla One', sans-serif;
    font-size: 17px;
    background: radial-gradient(#205983, #0A2742);
}
#turn { margin: 20px; }
#container {
    margin: 20px;
    padding: 20px;
}

#cube-container {
    margin-top: 40px;
    position: relative;
    -webkit-perspective: 1200px;
}

#cube {
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.4s;
}

#cube.rotate {
    -webkit-transform: rotateX(-90deg);
}

#top-face {
    border: 2px solid red;
    -webkit-transform: rotateX( 90deg ) translateZ(30px);
}

#front-face {
    border: 2px solid green;
    -webkit-transform: translateZ(30px);
}

#top-face, #front-face {
    padding: 20px;
    -webkit-backface-visibility: visible;
    position: absolute;
    width: 140px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .6);
    white-space: nowrap;
    font-size: 1em;
    color: #FFF;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .15), 0 2px 4px rgba(0, 0, 0, .2) inset, 0 0 12px rgba(255, 255, 255, .1);
    background: rgba(0, 0, 0, .1);
    border-radius: 10px;
}

#top-face > p, #front-face > p {
    -webkit-transition: 100ms cubic-bezier(0.08, 0.6, 0.56, 1.4);
    transition: 100ms cubic-bezier(0.08, 0.6, 0.56, 1.4);
    display: inline-block;
    position: relative;
}

JavaScript

$('#turn').on('click', function() {
        $('#cube').toggleClass('rotate')
    });