创建 3d 图像悬停效果

Question

我想创造这种效果，但 javascript 不像他那样纯粹 css。没有 scss 也只是 css 就好了。 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>

我也在使用 Vuejs，如果它为此改变了什么

Answer 1

您可以使用 transform 样式来获得 3D 效果。在下面查看我的代码

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>

创建 3d 图像悬停效果

Create 3d image hover effect

html

javascript

css

hover

vue.js