CSS Grid of Hexagons - 改变悬停动画

Posted 2023-03-06

【中文标题】CSS Grid of Hexagons - 改变悬停动画

【英文标题】：CSS Grid of Hexagons - changing the hover animation

【发布时间】：2018-08-02 09:28:34

【问题描述】：

所以我找到了一个带有图像的响应式六边形网格的资源。有谁知道如何在相同的编码中更改悬停动画？我正在尝试将其更改为一个简单的水平平铺翻转悬停动画，而不尽可能更改现有代码，谢谢！

我的存储库：https://github.com/MargauxShraiman/bellashraiman/ 原网址：https://github.com/web-tiki/responsive-grid-of-hexagons 我想模仿的动画：https://davidwalsh.name/demo/css-flip.php

    /*** HOVER EFFECT ************************************************/
    .hexLink:hover h1, .hexLink:focus h1,
    .hexLink:hover p, .hexLink:focus p
        -webkit-transform:translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);
    

【问题讨论】：

可能不成功，但是到目前为止您尝试了什么？并定义change。改成什么？

我一直在查看 css 代码以及他如何组织他的 JS，但我无法弄清楚是什么命令控制动画......如果这有意义的话。我想把它改成一个简单的翻转，就像这里看到的那样：davidwalsh.name/demo/css-flip.php

*** 悬停效果 ************************************* ************************************/ .hexLink:hover h1, .hexLink:focus h1, .hexLink:hover p, .hexLink:focus p -webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0);变换：translate3d（0,0,0）；

是的，就是这个地方。但是change，改成什么？

好吧，编辑你的问题，发布你的代码和你的尝试，我们会看看我们能做些什么:)

【参考方案1】：

如果你应用这个：

li.hex 
   transform: rotateY(180deg);
   transition: transform .2s ease-out;

悬停时每个六边形应旋转 180°。

【讨论】：

嗯，是的，您必须背靠背放置另一张卡片，如 David Walsh 的教程中所述。