#e8e8e8
1.cards { 2 perspective: 500px; 3} 4 5.card { 6 width: 200px; 7 height: 250px; 8 background: #16161d; 9 border: 2px solid #555555; 10 border-radius: 4px; 11 position: relative; 12 transform-style: preserve-3d; 13 will-change: transform; 14 transition: transform .5s; 15} 16 17.card:hover { 18 transform: translateZ(10px) rotateX(20deg) rotateY(20deg); 19} 20 21.card_title { 22 color: #fff; 23 position: absolute; 24 top: 50%; 25 right: 20px; 26 transform: translateY(-50%); 27 transition: transform .5s; 28 font: 700 1.5rem monospace; 29 text-shadow: -1px -1px 0 #000, 30 1px -1px 0 #000, 31 -1px 1px 0 #000, 32 1px 1px 0 #000; 33} 34 35.card:hover .card_title { 36 transform: translateZ(50px); 37}
Comments
MIT License