CSS变换和悬停属性

已解决 - 问题在于做一个旋转会将元素的一半放在网页的中性（零）Z轴后面，并且WebKit显然不允许通过该“中性“飞机。所以改变旋转点到面板的右/左边缘解决了它。奇怪，但现在它工作。CSS变换和悬停属性

我有一个简单的HTML5/CSS3页面，有四个面板。这些面板使用-webkit-transform将它们形成一个很好的安排。 On：悬停，我使用-webkit-transform将面板置于前台。代码如下。

发生什么事是：悬停行动是不可靠的。如果我将鼠标滑过面板，通常会停止移动鼠标并将其悬停在面板上，但面板仍处于原始位置。具体而言，从左向右滑动，最左边的两个面板看起来工作正常，但最右边的两个面板不会扩展，直到鼠标在面板的一半。

这会导致什么？

编辑：快速跟进，似乎链接放置在转换后的元素将只能在最左边（左边的两个面板）或最右边（右边两个面板）元素的一半点击。换句话说，点击区域只对元素的“接近”一半有效。

首先，HTML（小例子）：

而CSS：

#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); 
}

来源

2011-10-14 Justin Mrkva

它似乎是一个镀铬的错误，因为如果你删除原来的观点，只有它在悬停，它完美的作品。

（前http://jsfiddle.net/mMYrf/1/）

你可以做什么，然后，使其工作，可以createing其填满了远景区和悬停外部容器，给内部元件悬停效果。

（例如：http://jsfiddle.net/mMYrf/2/）

真棒效果BTW :)

来源

2011-10-14 07:54:41

同意，这是一个错误。但是，原因有点奇怪。有关详细信息，请在主要帖子中查看我的评论。 –

是的，这是奇怪的..我似乎无法找到行为的逻辑理由。代理真的很奇怪:( –

正如我在上面提到的那样，如果元素已经旋转过来，它就是鼠标事件被处理的方式中的一个错误，因此它的一部分位于z = 0平面的后面，想象一下旋转两个最右边的元素 - 左半部分在-z区域，鼠标事件不能达到它，这就是bug。 –

我有同样的问题，只有链接是hoverable和点击的前50％，而整个元素仍然可见。我通过将translateZ（1px）添加到我的-webkit-transform来解决此问题。这将整个元素置于Z轴的前方，并使其完全可移动并可点击。然而，translateZ有1px的缩放，但并不明显。在处理这个问题之前，这将不得不做！

来源

2011-11-01 05:43:42

CSS变换和悬停属性

回答

相关问题