CSS Hover Not Working on Transformed Elements - html

Question

I'm trying to have a skewed element change size on hover but for whatever reason, the elements only change whenever the mouse is about 200px below where it should be. I'm guessing this is either happening because of the way I transformed the elements or because of the way I positioned them on the page.
Code below
.layers {
margin: 150px 150px;
height: 500px !important;
width: 500px !important;
-webkit-perspective: 1000px; /* Chrome, Safari, Opera */
perspective: 1000px;
}
.layer img {
height: 500px;
width: 500px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
background: rgba(255, 255, 255, 0.65);
-webkit-transform: rotateX(75deg); /* Chrome, Safari, Opera */
transform: rotateX(75deg);
display: inline;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer:hover img {
-webkit-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
height: 510px;
width: 510px;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer1 {
display: inline-block;
position: relative;
z-index: 3;
}
.layer2 {
display: inline-block;
position: relative;
z-index: 2;
bottom: 450px;
}
.layer3 {
display: inline-block;
z-index: 1;
position: relative;
bottom: 900px;
}
<div class="layers">
<div class="layer1 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer1 -->
<div class="layer2 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer2 -->
<div class="layer3 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer3 -->
</div><!-- layers -->

Answer 1

Try putting the transform: rotateX(75deg); on .layer instead of its child image, like so:
.layers {
margin: 150px 150px;
height: 500px !important;
width: 500px !important;
-webkit-perspective: 1000px; /* Chrome, Safari, Opera */
perspective: 1000px;
}
.layer {
-webkit-transform: rotateX(75deg); /* Chrome, Safari, Opera */
transform: rotateX(75deg);
}
.layer img {
height: 500px;
width: 500px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
background: rgba(255, 255, 255, 0.65);
display: inline;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer:hover img {
-webkit-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
height: 510px;
width: 510px;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer1 {
display: inline-block;
position: relative;
z-index: 3;
}
.layer2 {
display: inline-block;
position: relative;
z-index: 2;
bottom: 450px;
}
.layer3 {
display: inline-block;
z-index: 1;
position: relative;
bottom: 900px;
}
<div class="layers">
<div class="layer1 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer1 -->
<div class="layer2 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer2 -->
<div class="layer3 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer3 -->
</div><!-- layers -->

Answer 2

Try replacing perspective: 1000px with transform: perspective(1000px)
.layers {
margin: 150px 150px;
height: 500px !important;
width: 500px !important;
//-webkit-perspective: 1000px; /* Chrome, Safari, Opera */
transform: perspective(1000px);
}
.layer img {
height: 500px;
width: 500px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
background: rgba(255, 255, 255, 0.65);
-webkit-transform: rotateX(75deg); /* Chrome, Safari, Opera */
transform: rotateX(75deg);
display: inline;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer:hover img {
-webkit-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
height: 510px;
width: 510px;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer1 {
display: inline-block;
position: relative;
z-index: 3;
}
.layer2 {
display: inline-block;
position: relative;
z-index: 2;
bottom: 450px;
}
.layer3 {
display: inline-block;
z-index: 1;
position: relative;
bottom: 900px;
}
<div class="layers">
<div class="layer1 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer1 -->
<div class="layer2 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer2 -->
<div class="layer3 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer3 -->
</div><!-- layers -->
Explanation from CSS-Tricks:
[...] the perspective property doesn't affect how the element is
rendered; it simply enables a 3D-space for children elements. This is
the main difference between the transform: perspective() function and
the perspective property. The first gives element depth while the
later creates a 3D-space shared by all its transformed children.