<div class="wrapper">
  <div class="card">
    <div class="l">
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 274.66 274.7"><defs><style>.cls-1{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.3px;}</style></defs><polygon class="cls-1" points="48.67 226.06 48.45 0.85 0.81 49.02 0.7 273.35 48.67 226.06"/><polygon class="cls-1" points="226.29 273.91 1.08 273.7 49.25 226.06 273.58 225.95 226.29 273.91"/></svg>      
      </div>
    <div class="plus">
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 274.37 274.14"><defs><style>.cls-1{fill:none;stroke-linecap:round;stroke-linejoin:round;}</style></defs><polygon class="cls-1" points="161.34 225.72 161.34 112.97 113.59 161.14 113.59 273.64 161.34 225.72"/><polygon class="cls-1" points="161.34 113.25 161.34 0.5 113.59 48.67 113.59 161.17 161.34 113.25"/><polygon class="cls-1" points="113.25 160.72 0.5 160.72 48.67 112.97 161.17 112.97 113.25 160.72"/><polygon class="cls-1" points="225.95 160.72 113.2 160.72 161.37 112.97 273.87 112.97 225.95 160.72"/></svg>
    </div>
    <div class="a"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 274.68 274.71"><defs><style>.cls-1{fill:none;stroke-linecap:round;stroke-linejoin:round;}</style></defs><polygon class="cls-1" points="113.25 48.25 0.5 48.25 48.67 0.5 161.17 0.5 113.25 48.25"/><polygon class="cls-1" points="226.24 48.25 113.49 48.25 161.66 0.5 274.16 0.5 226.24 48.25"/><polygon class="cls-1" points="274.19 113.27 274.19 0.52 226.44 48.69 226.44 161.19 274.19 113.27"/><polygon class="cls-1" points="274.19 226.3 274.19 113.55 226.44 161.71 226.44 274.21 274.19 226.3"/><polygon class="cls-1" points="161.22 112.77 161.22 0.02 113.47 48.19 113.47 160.69 161.22 112.77"/><polygon class="cls-1" points="161.22 225.78 161.22 113.03 113.47 161.19 113.47 273.69 161.22 225.78"/><polygon class="cls-1" points="225.76 161.23 113.01 161.23 161.18 113.48 273.68 113.48 225.76 161.23"/></svg></div>
  </div>
</div>
.wrapper {
  padding:40px;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  font-family: 'Roboto', sans-serif;
  background:url('https://images.unsplash.com/photo-1487621167305-5d248087c724?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80') no-repeat center center;
  background-size:cover;
  color:#fff;
}
.card {
  box-shadow:0px 0px 20px rgba(0,0,0,.2);
  width:600px;
  height:400px;
  display:flex;
  justify-content:center;
  align-items:center;
  transform-style: preserve-3d;
  border-radius:0px;
  flex-flow:row wrap;
  position:relative;
  background:rgba(255,255,255,.2);
  transition: all 0.75s ease-out;
}
.l {
  width:160px;
  height:160px;
  position:absolute;
  left:220px; 
  transition: all 1s ease-out;
}
.plus {
  width:160px;
  height:160px;
  position:absolute;
  left:220px;
  transition: all 0.75s ease-out;
}
.a {
  width:160px;
  height:160px;
  position:absolute;
  left:220px;
  transition: all 0.75s ease-out;
}
.cls-1 {
  stroke:#fff
}
const card = document.querySelector(".card");
const wrapper = document.querySelector(".wrapper");
const dot = document.querySelector(".l");
const title = document.querySelector(".plus");
const tag = document.querySelector(".a");

wrapper.addEventListener("mousemove", (e) => {
  let xAxis = (window.innerWidth / 2 - e.pageX) / 20;
  let yAxis = (window.innerHeight / 2 - e.pageY) / 20;
  card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
});
//Animate In
wrapper.addEventListener("mouseenter", (e) => {
  card.style.transition = "none";
  //Popout
  dot.style.transform = "translateZ(0px)";
  title.style.transform = "translateZ(200px)";
  tag.style.transform = "translateZ(400px)";
  line.style.transform = "translateZ(240px)";
});
//Animate Out
wrapper.addEventListener("mouseleave", (e) => {
  card.style.transition = "all 0.5s ease";
  card.style.transform = `rotateY(0deg) rotateX(0deg)`;
  //Popback
  dot.style.transform = "translateZ(0px)";
  title.style.transform = "translateZ(0px)";
  tag.style.transform = "translateZ(0px)";
  line.style.transform = "translateZ(0px)";
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.