html - CSS Hover 不适用于转换后的元素

Question

我试图让倾斜的元素在悬停时改变大小，但无论出于何种原因，元素只会在鼠标低于应有位置约 200 像素时发生变化。我猜这要么是因为我转换元素的方式，要么是因为我将它们放置在页面上的方式。

下面的代码

.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

尝试将 transform: rotateX(75deg); 放在 .layer 而不是其子图像上，如下所示:

.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 -->