Nuestro conocimiento compartido. Nuestro tesoro compartido. Wikipedia.
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

1 .smileys {2  display: none;3 }4 5 .smileys .material-icons {6  font-size: 100px !important;7 }8 9 .wrap .material-icons {10  display: block;11  font-size: 160px !important;12 }13 14 .wrap .face {15  text-align: center;16  background: rgba(255,255,255,0.8);17  background-size: contain;18 }19 20 .face.front {21  background-image: url('https://bytebucket.org/pleason/pleason-app-poc/raw/b4dea20288604184e86930f2e810938184cafc5d/www/directives/smiley/vh.png?token=0f60bc99bbe13f8381870284d40089e8b8a971e2');22 }23 24 .face.right {25  background-image: url('https://bytebucket.org/pleason/pleason-app-poc/raw/b4dea20288604184e86930f2e810938184cafc5d/www/directives/smiley/vd.png?token=a7e078a58feb3901c8b263f8dbd84d771efb833c');26 }27 28 .face.left {29  background-image: url('https://bytebucket.org/pleason/pleason-app-poc/raw/b4dea20288604184e86930f2e810938184cafc5d/www/directives/smiley/h.png?token=f69b4b6526b0d1331de4c364b3f88696a1951eac');30 }31 32 .face.back {33  background-image: url('https://bytebucket.org/pleason/pleason-app-poc/raw/b4dea20288604184e86930f2e810938184cafc5d/www/directives/smiley/d.png?token=bd31fd64510c18161a06a158e72fc3d115b8468c');34 }35 36 .wrap {37  width: 200px;38  margin: auto;39  perspective: 800px;40  perspective-origin: 50% 100px;41 }42 43 .cube {44  position: relative;45  width: 200px;46  transform-style: preserve-3d;47 }48 49 .cube div {50  position: absolute;51  width: 200px;52  height: 200px;53 }54 55 .back {56  transform: translateZ(-100px) rotateY(180deg);57 }58 .right {59  transform: rotateY(-270deg) translateX(100px);60  transform-origin: top right;61 }62 .left {63  transform: rotateY(270deg) translateX(-100px);64  transform-origin: center left;65 }66 .top {67  transform: rotateX(-90deg) translateY(-100px);68  transform-origin: top center;69 }70 .bottom {71  transform: rotateX(90deg) translateY(100px);72  transform-origin: bottom center;73 }74 .front {75  transform: translateZ(100px);76 }77 78 @keyframes spin {79  from { transform: rotateY(0); }80  to { transform: rotateY(360deg); }81 }82 83 .cube {84  animation: spin 3s infinite linear;85 }86 87 .wrap {88  transform: scale(1);89  transition: transform 5s linear;90 }91 92 .wrap:hover {93  transform: scale(4);94 95 }96 
Enlace
El enlace para compartir es: