奇怪的CSS webkit变换比例在Chrome中悬停

我对编码很陌生，但对计算机很有经验。 在下面的网站上，我正在创建一个放大悬停效果，仅用css编写

链接： 如果你在第一、第四、第五、第六、第七节看一看Chrome。。。图像，它们在悬停时存在严重的堆叠/层/优先级问题

一周前，每个浏览器都运行良好，但突然Chrome开始出现问题

起初，我在所有浏览器上都遇到了同样的问题，但后来我通过搜索互联网解决了这个问题，发现z索引设置是“页面优先级”问题的答案

我试着搜索互联网的每一个角落，每一个可能与这个主题相关的单词，但什么也没找到

以下是现场使用的代码：

<style type="text/css">

.hovergallery img {
    -webkit-transform:scale(1); /*Webkit:Scale down image to 0.8x original size*/
    -moz-transform:scale(1); /*Mozilla scale version*/
    -o-transform:scale(1); /*Opera scale version*/
    -webkit-transition-duration:0.5s; /*Webkit:Animation duration*/
    -moz-transition-duration:0.5s; /*Mozilla duration version*/
    -o-transition-duration:0.5s; /*Opera duration version*/
    opacity:1; /*initial opacity of images*/
    -webkit-perspective:1000; 
    -webkit-backface-visibility:hidden;
}

.hovergallery img:hover {
    -webkit-transform:scale(1.6); /*Webkit:Scale up image to 1.2x original size*/
    -moz-transform:scale(1.6); /*Mozilla scale version*/
    -o-transform:scale(1.6); /*Opera scale version*/
    box-shadow:0px 0px 30px gray; /*CSS3 shadow:30px blurred shadow all around image*/
    -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
    -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
    opacity:1; /*initial opacity of images*/
    -webkit-perspective:1000;
    -webkit-backface-visibility:hidden;
    z-index:999;
}
    </style>

.哈弗画廊{
-webkit变换：缩放（1）；/*webkit：将图像缩小到原始大小的0.8倍*/
-moz变换：缩放（1）；/*Mozilla缩放版本*/
-o变换：缩放（1）；/*歌剧缩放版本*/
-webkit转换持续时间：0.5s；/*webkit:动画持续时间*/
-moz转换持续时间：0.5s；/*Mozilla持续时间版本*/
-o-过渡-持续时间：0.5s；/*Opera持续时间版本*/
不透明度：1；/*图像的初始不透明度*/
-webkit透视图：1000；
-webkit背面可见性：隐藏；
}
.悬停画廊图片：悬停{
-webkit变换：缩放（1.6）；/*webkit：将图像放大到原始大小的1.2倍*/
-moz转换：缩放（1.6）；/*Mozilla缩放版本*/
-o型变换：比例（1.6）；/*歌剧比例版本*/
框阴影：0px 0px 30px灰色；/*CSS3阴影：图像周围30px模糊阴影*/
-webkit盒阴影：0px 0px 30px灰色；/*Safari阴影版本*/
-moz盒阴影：0px 0px 30px灰色；/*Mozilla阴影版本*/
不透明度：1；/*图像的初始不透明度*/
-webkit透视图：1000；
-webkit背面可见性：隐藏；
z指数：999；
}

webkit透视图：

和

webkit背面可见性：

用于阻止chrome中的图像在悬停时闪烁

---

z-index:

用于覆盖页面持有者阴影优先级（页面右侧的998），以便悬停时图像位于其上方而不是下方。正如您在Firefox或任何其他浏览器中查看链接时所看到的…

尝试添加

位置：相对到您的
.hovergallery img

.hovergallery img {
    -webkit-transform:scale(1); /*Webkit:Scale down image to 0.8x original size*/
    -moz-transform:scale(1); /*Mozilla scale version*/
    -o-transform:scale(1); /*Opera scale version*/
    -webkit-transition-duration:0.5s; /*Webkit:Animation duration*/
    -moz-transition-duration:0.5s; /*Mozilla duration version*/
    -o-transition-duration:0.5s; /*Opera duration version*/
    opacity:1; /*initial opacity of images*/
    -webkit-perspective:1000; 
    -webkit-backface-visibility:hidden;
    position:relative;
}

尝试添加
位置：相对到您的
.hovergallery img

.hovergallery img {
    -webkit-transform:scale(1); /*Webkit:Scale down image to 0.8x original size*/
    -moz-transform:scale(1); /*Mozilla scale version*/
    -o-transform:scale(1); /*Opera scale version*/
    -webkit-transition-duration:0.5s; /*Webkit:Animation duration*/
    -moz-transition-duration:0.5s; /*Mozilla duration version*/
    -o-transition-duration:0.5s; /*Opera duration version*/
    opacity:1; /*initial opacity of images*/
    -webkit-perspective:1000; 
    -webkit-backface-visibility:hidden;
    position:relative;
}

我也有类似的问题。我有gallary图像，在悬停效果中使用了不透明度、变换和缩放效果。缩放后的每个图像都变得透明，并在背景中显示其他图像。我根据上面的讨论修改了代码，粘贴在下面

.gallary{
    text-align:center;  

}

.gallary_img {
    display:inline-block;    
}

.gallary_img img{
border: 1px solid #660000;
display:inline-block;  
opacity:0.4;
-webkit-transition: -webkit-transform 0.5s ease-in;
**position:relative;**
}
.gallary_img img:hover {
    opacity:1.0;
    filter:alpha(opacity=100); /* For IE8 and earlier */
    border: 1px solid #660000;
    -moz-transform:  scale(2);
    -webkit-transform:  scale(2);
    transform: scale(2);
    **z-index:999;**

}

我也有类似的问题。我有gallary图像，在悬停效果中使用了不透明度、变换和缩放效果。缩放后的每个图像都变得透明，并在背景中显示其他图像。我根据上面的讨论修改了代码，粘贴在下面

.gallary{
    text-align:center;  

}

.gallary_img {
    display:inline-block;    
}

.gallary_img img{
border: 1px solid #660000;
display:inline-block;  
opacity:0.4;
-webkit-transition: -webkit-transform 0.5s ease-in;
**position:relative;**
}
.gallary_img img:hover {
    opacity:1.0;
    filter:alpha(opacity=100); /* For IE8 and earlier */
    border: 1px solid #660000;
    -moz-transform:  scale(2);
    -webkit-transform:  scale(2);
    transform: scale(2);
    **z-index:999;**

}

恐怕这个链接不会带来任何有价值的东西。。。这是一个必需的pin码，它不是一个工作输入字段。。除非你只输入。。。在那里输入pin也可以访问吗？妈的，我忘了！密码是5693！！登录地址是登录时按上述问题中的直接链接。谢谢你！只是跟进。。事情进展如何？恐怕这个链接并没有带来任何有价值的东西。。。这是一个必需的pin码，它不是一个工作输入字段。。除非你只输入。。。在那里输入pin也可以访问吗？妈的，我忘了！密码是5693！！登录地址是登录时按上述问题中的直接链接。谢谢你！只是跟进。。进展如何？