Card by dylanharriscameron
#e8e8e8
1.container .card { 2 background-color: white; 3 border-radius: 10px; 4 border: 1px solid black; 5 position: relative; 6 z-index: 0; 7 transition: all 300ms ease-out; 8 transform-origin: center center; 9 width: 100%; 10 height: 100%; 11 box-shadow: 0px; 12} 13 14.card-header { 15 padding: 10px; 16 background-color: #000; 17 color: white; 18 font-size: 16px; 19 border: 1px solid white; 20 border-top-left-radius: 10px; 21 border-top-right-radius: 10px; 22} 23 24.container .card .border { 25 transition: all 300ms ease-out; 26 transform-origin: center center; 27 position: absolute; 28 top: 6px; 29 left: 6px; 30 width: calc(100% - 12px); 31 height: calc(100% - 12px); 32 border: 1px solid black; 33 border-radius: 9px; 34} 35 36.container { 37 perspective: 1000px; 38 position: relative; 39 /* you don't need width and height if your card already has a lot of content */ 40 width: 100%; 41 max-width: 250px; 42 height: 150px; 43 border-radius: 10px; 44} 45.container a { 46 opacity: 0; 47 position: absolute; 48 z-index: 1; 49 width: 50%; 50 height: 50%; 51} 52.container a:hover, 53.container a:focus { 54 transform: translateZ(50px); 55} 56 57.container a:hover ~ .card .card-header, 58.container a:focus ~ .card .card-header { 59 transform: translateZ(24px); 60} 61 62.container a:nth-child(1) { 63 top: 0; 64 left: 0; 65} 66.container a:nth-child(1):hover ~ .card, 67.container a:nth-child(1):focus ~ .card { 68 transform: rotateX(10deg) rotateY(-10deg) translateZ(0); 69 transform-origin: right bottom; 70 box-shadow: 10px 20px; 71} 72.container a:nth-child(2) { 73 top: 0; 74 right: 0; 75} 76.container a:nth-child(2):hover ~ .card, 77.container a:nth-child(2):focus ~ .card { 78 transform: rotateX(10deg) rotateY(10deg) translateZ(0); 79 transform-origin: left bottom; 80 box-shadow: -10px 20px; 81} 82.container a:nth-child(3) { 83 bottom: 0; 84 right: 0; 85} 86.container a:nth-child(3):hover ~ .card , 87.container a:nth-child(3):focus ~ .card { 88 transform-origin: left top; 89 transform: rotateX(-10deg) rotateY(10deg) translateZ(0); 90 box-shadow: -10px -20px; 91} 92.container a:nth-child(4) { 93 bottom: 0; 94 left: 0; 95} 96.container a:nth-child(4):hover ~ .card, 97.container a:nth-child(4):focus ~ .card { 98 transform-origin: right top; 99 transform: rotateX(-10deg) rotateY(-10deg) translateZ(0); 100 box-shadow: 10px -20px; 101} 102
835 views
835 views
MIT License