#212121
1.book { 2 position: relative; 3 border-radius: 10px; 4 width: 220px; 5 height: 300px; 6 background-color: whitesmoke; 7 -webkit-box-shadow: 1px 1px 12px #000; 8 box-shadow: 1px 1px 12px #000; 9 -webkit-transform: preserve-3d; 10 -ms-transform: preserve-3d; 11 transform: preserve-3d; 12 -webkit-perspective: 2000px; 13 perspective: 2000px; 14 display: -webkit-box; 15 display: -ms-flexbox; 16 display: flex; 17 -webkit-box-align: center; 18 -ms-flex-align: center; 19 align-items: center; 20 -webkit-box-pack: center; 21 -ms-flex-pack: center; 22 justify-content: center; 23 color: #000; 24} 25 26.cover { 27 top: 0; 28 position: absolute; 29 background-color: lightgray; 30 width: 100%; 31 height: 100%; 32 border-radius: 10px; 33 cursor: pointer; 34 -webkit-transition: all 0.5s; 35 transition: all 0.5s; 36 -webkit-transform-origin: 0; 37 -ms-transform-origin: 0; 38 transform-origin: 0; 39 -webkit-box-shadow: 1px 1px 12px #000; 40 box-shadow: 1px 1px 12px #000; 41 display: -webkit-box; 42 display: -ms-flexbox; 43 display: flex; 44 -webkit-box-align: center; 45 -ms-flex-align: center; 46 align-items: center; 47 -webkit-box-pack: center; 48 -ms-flex-pack: center; 49 justify-content: center; 50} 51 52.book:hover .cover { 53 -webkit-transition: all 0.5s; 54 transition: all 0.5s; 55 -webkit-transform: rotatey(-80deg); 56 -ms-transform: rotatey(-80deg); 57 transform: rotatey(-80deg); 58} 59 60p { 61 font-size: 20px; 62 font-weight: bolder; 63}
Comments
MIT License