Card SourceCode

HTML Code

          
            <!DOCTYPE html>
            <html lang="en">
            <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Cards</title>
              <link rel="stylesheet" href="style.css">
            </head>
            <body>
            
              <div class="card">
                <div class="content">
                  <div class="front">
                    Front
                  </div>
                  <div class="back">
                    Back!
                  </div>
                </div>
              </div>
            
            </body>
            </html>
          
        

CSS Code

          
            @import url(https://fonts.googleapis.com/css?family=Lily+Script+One);
            body {
              background: #eee;
              font-family: 'Lily Script One';
            }
            
            .card {
              position: absolute;
              top: 50%;
              left: 50%;
              width: 300px;
              height: 300px;
              margin: -150px;
              float: left;
              perspective: 500px;
            }
            
            .content {
              position: absolute;
              width: 100%;
              height: 100%;
              box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            
              transition: transform 1s;
              transform-style: preserve-3d;
            }
            
            .card:hover .content{
              transform: rotateY( 180deg );
              transition: transform 0.5s;
            }
            
            .front,
            .back {
              position: absolute;
              height: 100%;
              width: 100%;
              background: white;
              line-height: 300px;
              color: #03446A;
              text-align: center;
              font-size: 60px;
              border-radius: 5px;
              backface-visibility: hidden;
            }
            
            .back {
              background: #03446A;
              color: white;
              transform: rotateY( 180deg );
            }