时间戳

首页 > 解决方案 > 静态鼠标不会主动悬停在旋转立方体上（相对面）

javascript - 静态鼠标不会主动悬停在旋转立方体上（相对面）

问题描述

我按照在线教程 ( https://3dtransforms.desandro.com/cube ) 制作了一个旋转的 3d 立方体。我添加了一个 CSS 动画来使立方体旋转并显示它的所有面。

@keyframes cubeSpin {
    0% { transform: rotateX(0) rotateY(0);}
    17% {transform: rotateX(90deg) rotateZ(0);}
    34% {transform: rotateX(90deg) rotateZ(90deg);}
    50% {transform: rotateX(180deg) rotateZ(90deg);}
    67% {transform: rotateX(270deg) rotateZ(90deg);}
    84% {transform: rotateX(270deg) rotateZ(0deg);}
    100% {transform: rotateX(360deg) rotateZ(360deg);} 
}

目前，如果您查看我的 codepen ( https://codepen.io/durandamien1997/pen/rNymxMo )，您会注意到，如果您将鼠标悬停在立方体上，它会改变立方体的面颜色。

.cube__face:hover {
    background: black;
    color: white;
}

但是，您还会注意到，如果您不移动鼠标并让它静止在立方体上，当立方体的新面进入鼠标附近时，该面上的 :hover 将不会被激活，但是 :hover 效果会粘在初始面，或者最后一次移动鼠标时的最后面。

我已经尝试使用 z-index 将每个面设置在它自己的图层上：悬停将自动为每个面激活，但只有这样：当索引最高的面击中鼠标时才会激活悬停。

/* z-index attempt */
.cube.show-front  { transform: translateZ(-100px) rotateY(   0deg); z-index: 1 }
.cube.show-right  { transform: translateZ(-100px) rotateY( -90deg); z-index: 2 }
.cube.show-back   { transform: translateZ(-100px) rotateY(-180deg); z-index: 3 }
.cube.show-left   { transform: translateZ(-100px) rotateY(  90deg); z-index: 4 }
.cube.show-top    { transform: translateZ(-100px) rotateX( -90deg); z-index: 5 }
.cube.show-bottom { transform: translateZ(-100px) rotateX(  90deg); z-index: 6 }

当当前面在视图中时，如何使 :hover 激活而无需移动鼠标？

标签： javascripthtmlcss

解决方案

推荐阅读