CSS六边形网格 - 更改悬停动画 [英] CSS Grid of Hexagons - changing the hover animation

问题描述

所以我找到了一个六边形图像响应网格的资源。有谁知道如何改变悬停动画在相同的编码？我试图改变它到一个简单的水平瓦翻转悬停动画，而无需尽可能地更改现有的代码，谢谢！

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

  / *** HOVER效果************ ************************************ / 
 .hexLink：hover h1，.hexLink：焦点h1，
 .hexLink：hover p，.hexLink：焦点p {
 -webkit-transform：translate3d（0,0,0）; 
 -ms-transform：translate3d（0,0,0）; 
 transform：translate3d（0,0,0）; 
 
  

解决方案

/ p>

  li.hex {
 transform：rotateY（180deg）; 
转换：转换.2s缓出; 
} 
  

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

So I found a resource for a responsive grid of hexagons with images. Does anyone know how to change the hover animations in the same coding? I'm trying to change it to a simple horizontal tile flip hover animation without changing the existing code as much as possible, Thanks!

My repository : https://github.com/MargauxShraiman/bellashraiman/ Original website : https://github.com/web-tiki/responsive-grid-of-hexagons the animation I'd like to imitate: 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);
    }

解决方案

If you apply this :

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

each hexagon should rotate by 180° on hover.

这篇关于CSS六边形网格 - 更改悬停动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！