3d Effects
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>3d Effects</title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="box"> | |
| <div class="imgBx"> | |
| <img src="img-hover.jpg"> | |
| </div> | |
| <div class="contentBx"> | |
| <h2>Tilte Box Hover Effects</h2> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, dolores quo tempore omnis ad similique? Modi, dignissimos molestiae? Enim debitis, deserunt accusantium. Veritatis dicta ipsam illum impedit excepturi suscipit inventore?</p> | |
| </div> | |
| </div> | |
| <div class="box"> | |
| <div class="imgBx"> | |
| <img src="img-hover.jpg"> | |
| </div> | |
| <div class="contentBx"> | |
| <h2>Tilte Box Hover Effects</h2> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, dolores quo tempore omnis ad similique? Modi, dignissimos molestiae? Enim debitis, deserunt accusantium. Veritatis dicta ipsam illum impedit excepturi suscipit inventore?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="text/javascript" src="vanilla-tilt.js"></script> | |
| <script type="text/javascript"> | |
| VanillaTilt.init(document.querySelectorAll(".box"), { | |
| max: 25, | |
| speed: 400 | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| <!-- Download This File --> | |
| <!-- https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.js --> | |
| <style type="text/css"> | |
| *{ | |
| margin: 0px; | |
| padding: 0px; | |
| box-sizing: border-box; | |
| font-family: arial; | |
| } | |
| body{ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| } | |
| .container{ | |
| position: relative; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| padding: 50px 0px; | |
| transform-style: preserve-3d; | |
| } | |
| .container .box{ | |
| position: relative; | |
| width: 450px; | |
| height: 300px; | |
| margin: 60px 0px; | |
| background: #000; | |
| transform-style: preserve-3d; | |
| } | |
| .container .box .imgBx{ | |
| position: absolute; | |
| top: 0px; | |
| left: 0px; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .container .box .contentBx{ | |
| position: absolute; | |
| top: 50%; | |
| left: 50px; | |
| right: 50px; | |
| background: #fff; | |
| transform: translateZ(20px) scaleY(0); | |
| padding: 40px 25px; | |
| transform-origin: top; | |
| transition:0.5s; | |
| transform-style: preserve-3d; | |
| } | |
| .container .box:hover .contentBx{ | |
| transform: translateZ(50px) scaleY(1); | |
| } | |
| .container .box:hover{ | |
| box-shadow: 0 50px 80px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
Comments
Post a Comment