Визитная карточка с 3D эффектом на CSS и jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
@import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700); body { background: #edf2f4; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100vh; font-family: "Playfair Display", georgia, serif; } .card { pointer-events: none; -webkit-transform: translateZ(0); transform: translateZ(0); padding: 30px; background: white; border-radius: 5px; width: 400px; height: 200px; margin: auto; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); position: relative; } .card:after { content: " "; position: absolute; width: 100%; height: 10px; border-radius: 50%; left: 0; bottom: -50px; box-shadow: 0 30px 20px rgba(0, 0, 0, 0.3); } .card .card-content { margin: auto; text-align: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .card h1 { -webkit-transform: translateZ(100px); transform: translateZ(100px); } .card p { -webkit-transform: translateZ(50px); transform: translateZ(50px); display: block; } .card p.related { -webkit-transform: translateZ(80px); transform: translateZ(80px); font-style: italic; } .card a { color: #69c6b8; pointer-events: auto; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="card"> <div class="card-content"> <h1>Я - заголовок</h1> <p><small>Автор <a href="http://ariona.net" target="_blank">Ariona, Rian</a></small></p> <p class="related"><strong>Советуем посмотреть: </strong><a href="http://codepen.io/ariona/details/LVZLGP/" target="_blank">Staged dropdown animation</a></p> </div> </div> <script> // why it doesn't work on firefox? var card = $(".card"); $(document).on("mousemove", function(e) { var ax = -($(window).innerWidth() / 2 - e.pageX) / 20; var ay = ($(window).innerHeight() / 2 - e.pageY) / 10; card.attr("style", "transform: rotateY(" + ax + "deg) rotateX(" + ay + "deg);-webkit-transform: rotateY(" + ax + "deg) rotateX(" + ay + "deg);-moz-transform: rotateY(" + ax + "deg) rotateX(" + ay + "deg)"); }); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
