<html>
    <head>
        <meta charset="utf-8">
        <title>hover card effect</title>
  
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    </head>
    <body id="body">
        <h1 class="title">Hover card effect Css rotate</h1>
        <div class="r">
            <div class="cardbox">
                <div class="card facebook">
                    <div class="card-front"><i class="fa fa-facebook"></i> </div>
                    <div class="card-back">Facebook</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card twitter">
                    <div class="card-front"><i class="fa fa-twitter"></i> </div>
                    <div class="card-back">Twitter</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card googleplus">
                    <div class="card-front"><i class="fa fa-google-plus"></i> </div>
                    <div class="card-back">Google+</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card instagram">
                    <div class="card-front"><i class="fa fa-instagram"></i> </div>
                    <div class="card-back">Instagram</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card five">
                    <div class="card-front"><i class="fa fa-500px"></i> </div>
                    <div class="card-back">500px</div>
                </div>
            </div>
        </div>
        <div class="r">
            <div class="cardbox">
                <div class="card chrome">
                    <div class="card-front"><i class="fa fa-chrome"></i> </div>
                    <div class="card-back">Chrome</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card firefox">
                    <div class="card-front"><i class="fa fa-firefox"></i> </div>
                    <div class="card-back">Firefox</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card opera">
                    <div class="card-front"><i class="fa fa-opera"></i> </div>
                    <div class="card-back">Opera</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card edge">
                    <div class="card-front"><i class="fa fa-edge"></i> </div>
                    <div class="card-back">Edge</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card safari">
                    <div class="card-front"><i class="fa fa-safari"></i> </div>
                    <div class="card-back">Safari</div>
                </div>
            </div>
        </div>
        <div class="r">
            <div class="cardbox">
                <div class="card wordpress">
                    <div class="card-front"><i class="fa fa-wordpress"></i></div>
                    <div class="card-back">Wordpress</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card tumblr">
                    <div class="card-front"><i class="fa fa-tumblr"></i> </div>
                    <div class="card-back">Tumblr</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card youtubu">
                    <div class="card-front"><i class="fa fa-youtube"></i> </div>
                    <div class="card-back">Youtubu</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card skype">
                    <div class="card-front"><i class="fa fa-skype"></i> </div>
                    <div class="card-back">Skype</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card vimeo">
                    <div class="card-front"><i class="fa fa-vimeo"></i> </div>
                    <div class="card-back">Vimeo</div>
                </div>
            </div>
        </div>
        <div class="r">
            <div class="cardbox">
                <div class="card windows">
                    <div class="card-front"><i class="fa fa-windows"></i> </div>
                    <div class="card-back">Windows</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card apple">
                    <div class="card-front"><i class="fa fa-apple"></i> </div>
                    <div class="card-back">Apple</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card linux">
                    <div class="card-front"><i class="fa fa-linux"></i> </div>
                    <div class="card-back">Linux</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card android">
                    <div class="card-front"><i class="fa fa-android"></i> </div>
                    <div class="card-back">Android</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card amazon">
                    <div class="card-front"><i class="fa fa-amazon"></i> </div>
                    <div class="card-back">Amazon</div>
                </div>
            </div>
        </div>
        <div class="r">
            <div class="cardbox">
                <div class="card pinterest">
                    <div class="card-front"><i class="fa fa-pinterest"></i> </div>
                    <div class="card-back">Pinterest</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card git">
                    <div class="card-front"><i class="fa fa-git"></i> </div>
                    <div class="card-back">Git</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card codepen">
                    <div class="card-front"><i class="fa fa-codepen"></i> </div>
                    <div class="card-back">Codepen</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card htmlfive">
                    <div class="card-front"><i class="fa fa-html5"></i> </div>
                    <div class="card-back">HTML5</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card css">
                    <div class="card-front"><i class="fa fa-css3"></i> </div>
                    <div class="card-back">CSS3</div>
                </div>
            </div>
        </div>
        <div class="r">
            <div class="cardbox">
                <div class="card amazon">
                    <div class="card-front"><i class="fa fa-amazon"></i> </div>
                    <div class="card-back">Amazon</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card github">
                    <div class="card-front"><i class="fa fa-github"></i> </div>
                    <div class="card-back">Github</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card dropbox">
                    <div class="card-front"><i class="fa fa-dropbox"></i> </div>
                    <div class="card-back">Dropbox</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card flickr">
                    <div class="card-front"><i class="fa fa-flickr"></i> </div>
                    <div class="card-back">Flickr</div>
                </div>
            </div>
            <div class="cardbox">
                <div class="card camera">
                    <div class="card-front"><i class="fa fa-camera"></i> </div>
                    <div class="card-back">Unsplash</div>
                </div>
            </div>
        </div>
    </body>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</html>    
#body{
    background-color:#292929;
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-family: arial;
    height: 100vh;
    
}
.title{
    color: aliceblue;
    position: absolute;
    text-align: center;
    width: 100%;
}

.r{
    padding-top: 65px;
}

.cardbox{
    perspective: 500px;
    margin: 15px;
}

.card{
    position: relative;
    border-radius: 5%; /* 모서리 */
    width: 120px;
    height: 120px;
    background: #fff;
    transform-style: preserve-3d;
    transition: 0.25s ease;
    box-shadow: 0 30px 30px rgba(0,0,0,0.5);
    cursor : pointer;
}


/* 카드 색상. 1열 */
.facebook{
   background:#3b5998;
    
}

.twitter{
    background:#00aced;
    
}

.googleplus{
    background:#dd4b39;

}

.instagram{
   background:#bfc8db;
    
}

.five{
    background:#868686;
    
}

/* 카드 색상. 2열 */

.chrome{
    background:#d69d31;
}

.firefox{
    background:#d66a31;
}

.opera{
    background:#d63131;
}

.edge{
    background:#314ad6;  
}

.safari{
    background:#6575d1;  
}

/* 카드 색상. 3열 */

.wordpress{
    color: black;
    background: #e3caca;
}

.tumblr{
    background:#c6abd9;
}

.youtubu{
    background:#ff0000;
}

.skype{
    background:#1530c7;  
}

.vimeo{
    background:#00e2ff;
}

/* 카드 색상. 4열 */

.windows{
    background: #2d45cc;
}

.apple{
    background:#b1b1b1;
}

.linux{
    background:#000000;
}

.android{
    background:#2aba3b;  
}

.amazon{
    background:#d67a2c;  
}


/* 카드 색상. 5열 */

.pinterest{
    background: #e31818;
}

.git{
    background:#e5e5e5;
}

.codepen{
    background:#b4e83f;
}

.htmlfive{
    background:#1a8827;  
}

.css{
    background:#177581;
}

/* 카드 색상. 6열 */

.amason{
    background: #F69E08;
}

.github{
    background:#313131;
}

.dropbox{
    background:#007EE5;
}

.flickr{
    background:#FF0084;  
}

.camera{
    background:#525252;
}

.card-front , .card-back{
    position: absolute;
    top:0;
    left: 0;
    width: 120px;
    height: 120px;
    color: #fff;
    backface-visibility: hidden;
    
}

.card-front{
    font-size: 40px;
    justify-content: center;
    text-align: center;
    display: flex;
    align-items: center;
}

.card-back{
    font-size: 25px;
    justify-content: center;
    text-align: center;
    display: flex;
    align-items: center;
}

.cardbox:hover .card{
    transform: rotateY(180deg);
}

.card-back{
    transform: rotateY(180deg);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.