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: