Create 3d image hover effect-CodePudding

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 >
          <div >
            <img
              id="secondPic"
              src="https://picsum.photos/200/300"
              alt="picture of a brick house"
              
            />
         </div>
</div>
<html>

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

CodePudding user response：

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" >
  <div >
    <h1>Just hover around</h1>
  </div>
</div>