Last Updated
Viewed 16 Times

I've been experimenting some css hover effects. When I tried to apply transform: perspective() it's acting very strange. When I direct cursor to the the left corner of image perspective of image is changing dramatically.

Here's the problem that I'm facing https://imgur.com/dXswIj6

const mouse = document.querySelector(".cursor");

window.addEventListener("mousemove", e => {
  mouse.style.transform = `translate(${e.clientX -
    (mouse.clientWidth / 2 + 2)}px, ${e.clientY -
    (mouse.clientHeight / 2 + 2)}px)`;

  // console.log(e);

  if (e.target.nodeName == "A") {
    mouse.classList = "cursor active";
  } else {
    mouse.classList = "cursor";
  }
});
body {
  background-color: #090a0c;
  color: #eee;
}
.cursor {
  width: 48px;
  height: 48px;
  border: 1px solid #222;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.3s all ease-out;
  z-index: -1;
  touch-action: none;
}
.cursor .cursor-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: red;
}
.cursor.active {
  background-color: #111;
  transform: scale(1.5);
  transition: 0.3s all ease-out;
}
#feautured-work {
  padding: 36px 0;
}
.item {
  overflow: hidden;
  transition: 0.6s all ease;
}
.item .item-img img {
  width: 100%;
  transition: 1s all ease-out;
}
.item:hover {
  transform: perspective(8rem) rotateY(-2deg);
}
.item:hover .item-img img {
  transform: scale(1.05);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h1>Hi kids</h1>
  <a href="#">Anchor</a>
  <div class="cursor">
    <div class="cursor-dot"></div>
  </div>
  <div id="app">
    <div id="feautured-work">
      <div class="container">
        <div class="row">
          <div class="col-sm-6" data-rellax-speed=>
            <div class="item">
              <div class="item-img">
                <img src="https://images.unsplash.com/photo-1574237237524-cf9468af5d5c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
              </div>
              <div class="item-desc"></div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="item">
              <div class="item-img">
                <img src="https://images.unsplash.com/photo-1575043635751-f8cf3ffb9471?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
              </div>
              <div class="item-desc"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

What's causing to transform property work improperly?

I recently came across this pen on codepen https://codepen.io/joshnh/pen/paxbE I have been playing around with this animation but am unable to get it working on any other browser other than chrome. I have tried all prefixes with transform and transitions. when I remove the perspective(500) property the animation works in firefox but not with the desired results. From what I've read it is something to do with the way chrome applies the perspective property to child elements differently than other browsers. Is there any work around to getting this type of animation working across all browsers? This is what I have changed the css to in order to get it working in other browsers but nothing seems to help.

html {
height: 100%;
}
body {
position: absolute;
width: 100%;
height: 100%;
-moz-animation: myfade 5s;
-webkit-animation: myfade 5s;
animation: myfade 5s;
background: url("../img/screenbackground.jpg");

 }
button {
position: absolute;
top: 0.6%;
margin-left: 2%;;
border: none;
background: #3a7999;
color: #f2f2f2;
padding: 10px;
font-size: 14px;
border-radius: 5px;
opacity: 0;
box-sizing: border-box;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
transition: all 500ms ease;
}
button:hover {
background: #000000;
color: #3a7999;
box-shadow:  inset 0 0 0 3px #3a7999;
}
.imageWrapper {
background-color:transparent;
font-family: sans-serif;
font-size: 100%;
line-height: 20%;
margin: 0 auto;
padding: 1em;
width: 80%;
height: 60%;
margin-top: 3%;

}
figure {

float: left;
height: 12em;
margin: 3em;
margin-top: 1em;
margin-bottom: 0.5em;
width: 24em;
-webkit-transform: perspective(500);
-webkit-transform-style: preserve-3d;
-webkit-transition: .5s;
-moz-transform: perspective(500);
-moz-transform-style: preserve-3d;
-moz-transition: .5s;
transform: perspective(500);
transform-style: preserve-3d;
transition: .5s;
border-radius: 5px;

-webkit-animation: myflip;
-moz-animation: myflip;
-ms-animation: myflip;
animation: myflip 5s;

}
figure:hover {
-webkit-transform: perspective(500) rotateX(90deg) translateY(-48px) 
translateZ(60px);
-moz-transform: perspective(500) rotateX(90deg) translateY(-48px) 
translateZ(60px);

-ms-transform: perspective(500) rotateX(90deg) translateY(-48px) 
translateZ(60px);
transform: perspective(500) rotateX(90deg) translateY(-48px) 
translateZ(60px);

}

img {
background-color: #222;
box-shadow: 0 40px 30px -20px hsla(0,0%,0%,.25);
display: block;
height: 100%;
-webkit-transition: .5s;
 -moz-transition: .5s;
  transition: .5s;

}
figure:hover img {
box-shadow: none;
}
figcaption {
background-color: #222;
color: #fff;
padding: 1.5em;
-webkit-transform: rotateX(-90deg);
-webkit-transform-origin: 100% 0;
-webkit-transition: .5s;
 -moz-transform: rotateX(-90deg);
 -moz-transform-origin: 100% 0;
 -moz-transition: .5s;
 transform: rotateX(-90deg);
 transform-origin: 100% 0;
 transition: .5s;

}
figure:hover figcaption {
box-shadow: 0 20px 15px -10px hsla(0,0%,0%,.25);
}
h3 {
font-weight: bold;
}





@-webkit-keyframes myflip {
0% {

    -webkit-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    transform: perspective(500) rotateX(90deg)  translateZ(60px);
}
50% {
    -webkit-transform: perspective(500) rotateX(90deg)  translateZ(60px);
     -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    transform: perspective(500) rotateX(90deg)  translateZ(60px);
}
    80% {
        -webkit-transform: perspective(500) rotateX(90deg)  
         translateZ(60px);
        -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
        -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
        transform: perspective(500) rotateX(90deg)  translateZ(60px);
    }
  100% {

 }
 }
 @-moz-keyframes myflip {
 0% {

    -webkit-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    transform: perspective(500) rotateX(90deg)  translateZ(60px);
  }
 50% {
    -webkit-transform: perspective(500) rotateX(90deg)  translateZ(60px);
     -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    transform: perspective(500) rotateX(90deg)  translateZ(60px);
 }
     80% {
        -webkit-transform: perspective(500) rotateX(90deg)  
         translateZ(60px);
        -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
        -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
        transform: perspective(500) rotateX(90deg)  translateZ(60px);
    }
    100% {

  }
  }

   @keyframes myflip {
  0% {

    -webkit-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    transform: perspective(500) rotateX(90deg)  translateZ(60px);
  }
  50% {
    -webkit-transform: perspective(500) rotateX(90deg)  translateZ(60px);
     -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    transform: perspective(500) rotateX(90deg)  translateZ(60px);
   }
     80% {
        -webkit-transform: perspective(500) rotateX(90deg)  
         translateZ(60px);
        -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
        -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
        transform: perspective(500) rotateX(90deg)  translateZ(60px);
      }
   100% {

 }
 }

  @-ms-keyframes myflip {
  0% {

    -webkit-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    transform: perspective(500) rotateX(90deg)  translateZ(60px);
  }
   50% {
    -webkit-transform: perspective(500) rotateX(90deg)  translateZ(60px);
     -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
    transform: perspective(500) rotateX(90deg)  translateZ(60px);
  }
    80% {
        -webkit-transform: perspective(500) rotateX(90deg)  
         translateZ(60px);
        -moz-transform: perspective(500) rotateX(90deg)  translateZ(60px);
        -ms-transform: perspective(500) rotateX(90deg)  translateZ(60px);
        transform: perspective(500) rotateX(90deg)  translateZ(60px);
    }
   100% {

  }
  }

   @-webkit-keyframes myfade {
     0% {
        opacity: 0;
    }
    100% {
        opacity 1;
    }
  }
  @-moz-keyframes myfade {
    0% {
        opacity: 0;
    }
    100% {
        opacity 1;
    }
  }
  @keyframes myfade {
    0% {
        opacity: 0;
    }
    100% {
        opacity 1;
    }
  }

Similar Question 2 : CSS mesh perspective/transform

Is it possible to do free transforms of an element using CSS - similar to a mesh transform?

enter image description here

The closest I can get to this is using something like transform: perspective(400px) rotateY(45deg); with three elements, but I would like it to be one continuous img element.

They should be do the same thing right? Also set up the 3d perspective for the child? But is there any different in browser support or others?

Similar Question 6 (2 solutions) : CSS perspective not working in Firefox

Similar Question 7 (1 solutions) : CSS Perspective Error

Similar Question 8 (2 solutions) : Using units on CSS perspective

Similar Question 9 (1 solutions) : Transform Element to Match Perspective of Tablet Render

cc