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 }18 19 .wrap .face:hover {20 border: solid;21 }22 23 .wrap {24 width: 200px;25 margin: auto;26 perspective: 800px;27 perspective-origin: 50% 100px;28 }29 30 .cube {31 position: relative;32 width: 200px;33 transform-style: preserve-3d;34 }35 36 .cube div {37 position: absolute;38 width: 200px;39 height: 200px;40 }41 42 .back {43 transform: translateZ(-100px) rotateY(180deg);44 }45 .right {46 transform: rotateY(-270deg) translateX(100px);47 transform-origin: top right;48 }49 .left {50 transform: rotateY(270deg) translateX(-100px);51 transform-origin: center left;52 }53 .top {54 transform: rotateX(-90deg) translateY(-100px);55 transform-origin: top center;56 }57 .bottom {58 transform: rotateX(90deg) translateY(100px);59 transform-origin: bottom center;60 }61 .front {62 transform: translateZ(100px);63 }64 65 @keyframes spin {66 from { transform: rotateY(0); }67 to { transform: rotateY(360deg); }68 }69 70 .cube {71 animation: spin 3s infinite linear;72 }73 74 Enlace
El enlace para compartir es: