Quiero crear este efecto pero con javascript no en css puro como lo hizo. Y no scss también solo css Será bueno. códec
.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>También estoy usando Vuejs si cambia algo para esto.
Puede usar el estilo de transformación para obtener el efecto 3D. Revisa mi código a continuación
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>