Question

我试图在悬停时有一个倾斜的元素更改大小，但无论出于何种原因，只要鼠标位于应该低于200px的位置，元素才会发生变化。我猜这是因为我改变元素的方式或因为我将它们放在页面上的方式而发生。

以下代码

.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

尝试将perspective: 1000px替换为transform: perspective(1000px)

＆＃13;

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

＆＃13;

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

＆＃13;

来自CSS-Tricks的解释：

[...]透视属性不会影响元素的方式呈现;它只是为儿童元素启用了3D空间。这是 transform：perspective（）函数和。之间的主要区别透视属性。第一个给出元素深度而之后创建一个由其所有已转换的孩子共享的3D空间。

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

CSS悬停不适用于转换后的元素

2 个答案: