<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="father"> <!--Start Front Side--> <div class="front"> <header> <img src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1505286021" alt="Eslam"> <!--or https://goo.gl/YMvdyN--> </header> <span class="hover1">HARUN PEHLİVAN</span> <p> FOUNDER,CEO BLOGGER</p> <span class="hover2">Hover To See Details</span> </div> <!--End Front Side--> <!--Start Back Side--> <div class="back"> Contact me at: <ul> <li> HARUN PEHLİVAN<a href="https://www.facebook.com/profile.php?id=100008152065270" target="_blanck"> <i class="fa fa-facebook-square fa-4x"></i></a> </li> <hr> <li> <a href="https://twitter.com/HTERCUMANP" target="_blanck"> <i class="fa fa-twitter-square fa-4x"></i></a>HARUN PEHLİVAN </li> <hr> <li>HARUN PEHLİVANy<a href="https://www.youtube.com/user/harunpehlivan1" target="_blanck"> <i class="fa fa-youtube-square fa-4x"></i></a> </li> <hr> <li> <a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252/" target="_blanck"> <i class="fa fa-linkedin-square fa-4x"></i></a>HARUN PEHLİVAN </li> </ul> </div> <!--End Back Side--> </div>

body { background-color: #64b5f6; margin: 0; padding: 10px; perspective: 1000px } .father { font-family: 'Frijole', cursive; height: 500px; margin: auto; position: relative; text-align: center; transform-style: preserve-3d; transition: all 1.5s ease-in-out; width: 400px } .father:hover {transform:rotateX(180deg) rotateY(360deg)} .father > div { backface-visibility: hidden; height: 100%; position: absolute; width: 100% } .front { background: #222930; border-radius: 20px 20px 10px 10px; color: #000; z-index: 2 } .back { background: #222930; border-radius: 20px; color: #FFF; transform: rotateX(180deg); z-index: 1 } header { background-image: url(http://www.clipartbay.com/cliparts/sky-with-clouds-clip-art-lgppnc6.png); background-size: cover; -webkit-border-top-left-radius: 20px; border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; border-top-right-radius: 20px; height: 150px; position: relative; width: 100% } header img { background: #222930; border: 1px solid #000; -webkit-border-radius: 50%; border-radius: 50%; padding: 3px; position: absolute; right: 145px; top: 90px; width: 120px } .hover1 { color: #4eb1ba; display: inline-block; font: italic bold 32px 'Frijole', cursive; margin-top: 80px; text-shadow: 2.5px 25.5px 24px #4eb1ba } .father .front p { color: #FFF; font-size: 22px; margin-top: 40px; margin-bottom: 30px } .father .hover2 { color: #0061BC; cursor: pointer; font-size: 20px } .father .hover2:hover {text-decoration: line-through;color:#000} .back ul { list-style: none; text-align: left } .back ul li .fa-4x { cursor: pointer; margin-bottom: 35px } .back ul li a { color: #000; margin-left: 50px; margin-right: 50px; text-decoration: none; -webkit-text-shadow: 3px 3px 20px #686262; text-shadow: 3px 3px 20px #686262 } .back ul li a:hover{color: #FFF} hr {border: 2px groove #CCC}