Html CSS转换和悬停属性_Html_Css_Webkit Transform_Webkit Transition

Html CSS转换和悬停属性

html css

Html CSS转换和悬停属性,html,css,webkit-transform,webkit-transition,Html,Css,Webkit Transform,Webkit Transition,解决了-问题是旋转会将一半元素置于网页的中性（零）Z轴后面，而WebKit显然不允许鼠标事件通过该“中性”平面。因此，将旋转点更改为面板的右/左边缘可以解决此问题。奇怪，但现在它起作用了我有一个简单的HTML5/CSS3页面，有四个面板。这些面板使用-webkit转换将它们形成一个漂亮的排列。启用：悬停，我使用-webkit转换将面板移到前台。代码如下发生的情况是：悬停操作不可靠。如果我在面板上滑动鼠标，通常会在鼠标悬停在面板上时停止移动鼠标，但面板仍处于其原始位置。具体来说，从左向右滑动时

解决了-问题是旋转会将一半元素置于网页的中性（零）Z轴后面，而WebKit显然不允许鼠标事件通过该“中性”平面。因此，将旋转点更改为面板的右/左边缘可以解决此问题。奇怪，但现在它起作用了

我有一个简单的HTML5/CSS3页面，有四个面板。这些面板使用-webkit转换将它们形成一个漂亮的排列。启用：悬停，我使用-webkit转换将面板移到前台。代码如下

发生的情况是：悬停操作不可靠。如果我在面板上滑动鼠标，通常会在鼠标悬停在面板上时停止移动鼠标，但面板仍处于其原始位置。具体来说，从左向右滑动时，最左边的两个面板似乎工作正常，但最右边的两个面板直到鼠标穿过面板的一半时才会放大

这是什么原因造成的

编辑：快速跟进，看起来放置在转换元素中的链接只能在元素的最左侧（对于两个左侧面板）或最右侧（对于两个右侧面板）的一半上单击。换句话说，单击区域仅对元素的“较近”部分处于活动状态

首先，HTML（最简单的示例）：

这似乎是一个chrome bug，因为如果你删除了原始透视图，只将其悬停在鼠标上，它就可以完美地工作

（前）

然后，您可以创建一个外部容器来填充透视区域，并在悬停时为内部元素提供悬停效果

（例）

可怕的效果顺便说一句：）

我也有同样的问题，只有前50%的链接是可悬停和可点击的，而整个元素仍然可见。我通过将translateZ（1px）添加到my-webkit transform中修复了这个问题。这将使整个元素位于Z轴前面，并使其完全可悬停和单击。然而，translateZ有1px的缩放，但这是不明显的。在这个问题得到解决之前，我们必须这样做

同意，这是一个错误。然而，原因有点奇怪。详情请参见我在主帖子上面的评论。是的，这很奇怪。。我似乎找不到这种行为合乎逻辑的理由。行为真的很奇怪：（正如我上面提到的，如果元素被旋转，那么它的一部分在z=0平面后面，那么鼠标事件的处理方式就是一个bug。想象一下旋转最右边的两个元素-左边的一半在-z区域，鼠标事件没有到达它。这就是bug。

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<section id="test">
    <article class="tr_left"></article>
    <article class="tr_midleft"></article>
    <article class="tr_midright"></article>
    <article class="tr_right"></article>
</section>
</body>
</html>

#test article {
    display: inline-block;
    height: 150px;
    width: 160px;
    background-color: blue;
    -webkit-transition: -webkit-transform 0.2s ease;
}

#test article.tr_left {
    -webkit-transform: perspective(400px) rotateY(20deg) scale(1);
}

#test article.tr_midleft {
    -webkit-transform: perspective(400px) rotateY(8deg) scale(0.9);
}

#test article.tr_midright {
    -webkit-transform: perspective(400px) rotateY(-8deg) scale(0.9);
}

#test article.tr_right {
    -webkit-transform: perspective(400px) rotateY(-20deg) scale(1);
}

#test article:hover, #test article:active {
    -webkit-transform: perspective(400px) scale(1.2);
}