3.6K views
1.scene { 2 width: 10em; 3 justify-content: center; 4 align-items: center; 5} 6 7.cube { 8 color: #ccc; 9 cursor: pointer; 10 font-family: 'Roboto', sans-serif; 11 transition: all 0.85s cubic-bezier(.17,.67,.14,.93); 12 transform-style: preserve-3d; 13 transform-origin: 100% 50%; 14 width: 10em; 15 height: 4em; 16} 17 18.cube:hover { 19 transform: rotateX(-90deg); 20} 21 22.side { 23 box-sizing: border-box; 24 position: absolute; 25 display: inline-block; 26 height: 4em; 27 width: 10em; 28 text-align: center; 29 text-transform: uppercase; 30 padding-top: 1.5em; 31 font-weight: bold; 32} 33 34.top { 35 background: wheat; 36 color: #222229; 37 transform: rotateX(90deg) translate3d(0, 0, 2em); 38 box-shadow: inset 0 0 0 5px #fff; 39} 40 41.front { 42 background: #222229; 43 color: #fff; 44 box-shadow: inset 0 0 0 5px #fff; 45 transform: translate3d(0, 0, 2em); 46}
Mike11jr
Mike Grün
MIT License