Css Card Animated Rotate

Memasang kode
Css Card Animated Rotate
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kode  
blank template,  yang tersedia pada sumber berikut :

Get Blank Template  edit background warna sesuai keinginan Kemudian klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="mys2010-styles">

/*Background*/
body {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNcXlEOZXHol04QYEwiqfh9U4f5R4u_yrq3E788_Vx1yMQWZwyhIANS5rlJz1B0UfhIxh8CeLUMxQEbVEsBJnLH7Wva_QH9mtnRjuQoRL7zILNdECYGNRiqcEBbrBEngnp9mtJ176Cn6E9/s1600-r/black-gradient-mys2010.png);color:red;height:100%;overflow:hidden;}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #333;
  border-bottom: 2px solid #A10048;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 50px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #fof;
background: #333;
border-top: 2px solid #A10048;
z-index: 9999;
}/* GRADIEND END */

/* CARD */
.card {
  margin: 0 auto;
  background-color: #444;
  width: 700px;
  height: 340px;
  border: 15px double #333;
}
.head_shot {
  margin-top:  30px;
}
.head_shot img {
  height: 125px;
  border: 2px solid #333;
  border-radius: 100%;
  display: block;
  margin: 0 auto;
}
h2 {
  font-family: 'Clicker Script', cursive;
  font-size: 30px;
  color: #2F2933;
  text-align: center;
  margin: 0;
}
.line {
  border-top: 1px solid #FF0000;
  max-width: 500px;
  margin: 0 auto;
  margin-top: 0px;
}
.card {
  opacity: 0;
    -webkit-animation: fade-in 3s ease-in 1;
    -moz-animation: fade-in 3s ease-in 1;
    -o-animation: fade-in 3s ease-in 1;
    animation: fade-in 3s ease-in 1;
}
@-webkit-keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.card {
  opacity: 1;
}
.fade {
  opacity:0.7;
  transition: opacity 2s ease;
}

.fade:hover {
  opacity:1;
}
.rotate {
  display: inline-block;
}

.rotate:hover {
  cursor: none;
    -webkit-transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
}
.text_scroll p {
  font-family: 'Gruppo', cursive;
  height: 20px;
  float: left;
  white-space: nowrap;
  position: relative;
  font-size: 55px;
  color: #2F2933;
  font-weight: bold;
  margin-top:  0px;
}
.text_scroll {
  max-height: 50px;
  max-width: 700px;
  margin: 0 auto;
  padding-left: 10px;
  float: left;
}
.scrolling_words {
  overflow: hidden;
  position: relative;
  height: 50px;
  padding-left: 10px;
  margin-top: 78px;
}
.scrolling_words  p {
  font-family: 'Gruppo', cursive;
  margin: 0 0 26px;
  color: #2F2933;
  position: relative;
  white-space: nowrap;
  -webkit-animation: move 8s 1s infinite;
  -moz-animation: move 8s 1s infinite;
  -o-animation: move 8s 1s infinite;
  animation: move 8s 1s infinite;
  font-size: 50px;
  letter-spacing: 2px;
}
@-webkit-keyframes move {
  0%  { top:  0px; }
  20% { top: -45px; }
  40% { top: -90px; }
  60% { top: -175px; }
  60% { top: -140px; }
  80% { top: -0px; }
  80% { top: -0px; }
}
.octocat {
  clear: both;
}
.octocat img {
  height: 50px;
}
.octocat {
  width: 50px;
  display: block;
  margin:  5px 0 0  5px;
  padding-top:0px;
}
.grow:hover {
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  transition-duration: 1s;
}

/*rotate*/
#social a:hover { background-color: transparent;opacity:0.7; } #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
</style>

<div class="card">
<div class="head_shot">
<img src="http://1.bp.blogspot.com/-9iaLkuIma-I/Vug88ZGpdJI/AAAAAAAAY7w/rK2tpG6AU4MiZHIw1zGZkO-5IgtiOtoCw/s1600-r/Logo-mys2010.png"alt="Head Shot"/ class="fade"></div>
<div class="name">
<h2><a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Visit Mys2010">Myscript<div class="rotate">
2010</div>
</h2>
</div>
<div class="line">
</div>

<center>
<div id="social">
<a title="Facebook" href="https://www.facebook.com/learn.editing.myscript2010" target="_blank">  <img src="http://3.bp.blogspot.com/-8ITKvl307W8/Vqi0VWVfyuI/AAAAAAAAX0Y/5iC8VAlOY2o/s1600-r/facebook-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/><a title="JsFidle-Mys2010" href="https://jsfiddle.net/user/dashboard/"target="_blank"><img src="http://4.bp.blogspot.com/-r_OIWTWapEc/VulOJwqVEpI/AAAAAAAAY-g/pfsJj1z6xY8qWe5jwV6XzKxMhRh_GzN5A/s1600-r/Js-myscript2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a><a title="Mys2010 Github" href="https://gist.github.com/Myscript2010" target="_blank"> <img src="http://3.bp.blogspot.com/-jXuDkG-oca8/Vqi2odTTKPI/AAAAAAAAX2E/ojJ2ZQBueq8/s1600-r/github-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a> <a title="Mys2010 on Codepen" href="http://codepen.io/Myscript2010/pen/vGyMaW" target="_blank"> <img src="http://4.bp.blogspot.com/-gaxSIfw2m9U/Vuk04Ubv5rI/AAAAAAAAY9g/C0ZIFTttiuAGWuQoRhviJIzAEkN6wGN1A/s1600-r/icon_codepen-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a> <a title="Twitter" href="https://twitter.com/myscript2010s" target="_blank"> <img src="http://1.bp.blogspot.com/-k1_c-TEOOWE/Vqi0wCBSzLI/AAAAAAAAX1g/rdrWa0OVUAM/s1600-r/twitter-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a> </div>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html" target="_blank" title="M 2010 Hover">
<font size="2" color="green"face="Agency FB"><b>EDITED BY. MYSCRIPT2010</b> </a>

<header>
<div class="Top Title Header">
<div align="center">
<a href="http://codepen.io/raveve/pen/gbgWGm" target="_blank" title="Raven Askew on Codepen"><font size="2" color="green"face="Agency FB"><b>SOURCES BY. RAVEN ASKEW</b></a>
</div>
</header>

<link rel="stylesheet" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Clicker+Script|Gruppo' rel='stylesheet' type='text/css'>

Penjelasan :
Ganti link title, teks serta link gambar sesuai keinginan

Edited by. Mys2010 on Codepen
Sources by. Raven Askew on Codepen

DEMOSHOW