Create 3d image hover effect

Question

I want to create this effect but with javascript not in pure css as he did. And no scss also just css It'll be good. codepen

 .picture-container { display: flex; flex-flow: row nowrap; justify-content: center; justify-self: center; align-items: center; width: 40%; height: 100vh; } .picture-frame { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; padding: 5%; border: solid 1px #000; } .picture { z-index: 1; width: 100%; height: 100%; }

 <html> <div class="picture-container first-picture horizontal-small"> <div class="picture-frame"> <img id="secondPic" src="https://picsum.photos/200/300" alt="picture of a brick house" class="picture middle-right" /> </div> </div> <html>

I'm also using Vuejs if it changes something for this

Answer 1

You can use transform styling to get the 3D effect. Checkout my code below

 var card = document.getElementsByClassName('card'); document.addEventListener("mousemove", function(e) { var ax = -(window.innerWidth/2- e.pageX)/20; var ay = (window.innerHeight/2- e.pageY)/10; document.getElementById("cards").style.transform = "rotateY("+ax+"deg) rotateX("+ay+"deg)"; });

 @import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700); body { background: #edf2f4; perspective: 1000px; transform-style: preserve-3d; display: flex; height: 100vh; font-family: "Playfair Display", georgia, serif; } .card { pointer-events: none; transform: translateZ(0); padding: 30px; background: white; border-radius: 5px; width: 400px; height: 200px; margin: auto; transform-style: preserve-3d; backface-visibility: hidden; display: flex; box-shadow: 0 0 5px rgba(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, .3); } .card .card-content { margin: auto; text-align: center; transform-style: preserve-3d; } .card h1 { transform: translateZ(100px); }

 <div id="cards" class="card"> <div class="card-content"> <h1>Just hover around</h1> </div> </div>

Create 3d image hover effect

Question

1 answers

solution1
1 ACCPTED 2022-05-25 11:53:57

Create 3d image hover effect

Question

1 answers

solution1 1 ACCPTED 2022-05-25 11:53:57

solution1
1 ACCPTED 2022-05-25 11:53:57