手把手教你用纯CSS实现方向感应卡片组

一条会coding的Shark
1,907 阅读4分钟

前言

看到这个标题，相信有人会感到疑惑，什么是方向感应卡片组？这是一个控制效果，这里简单举个例子，方向感应，就是可以跟随方向的变化跟随之变化，当我们鼠标放在其中一张卡片上的时候，其余的卡片就会朝着这张卡片看齐，这样就是方向感应卡片组。接下来带大家先看看效果。

效果预览

这个就是方向感应卡片组的效果了，简单来说就是当鼠标悬停在某一张卡片上时，其他卡片会感应到该卡片。该效果是纯CSS实现，感兴趣的小伙伴可以接着往下看。

HTML布局

老规矩，咱们先整上HTML部分，相关代码如下所示。

 <div class="container">
        <div class="card">
            <h2>1</h2>
        </div>
        <div class="card">
            <h2>2</h2>
        </div>
        <div class="card">
            <h2>3</h2>
        </div>
        <div class="card">
            <h2>4</h2>
        </div>
        <div class="card">
            <h2>5</h2>
        </div>
    </div>

这里创建一个包含五个卡片的容器。每个卡片都有一个标题，分别为1、2、3、4和5。这一部分比较简单，可以根据需要进行样式和内容的修改。

CSS实现

接下来就是来实现CSS样式了。先来看看container容器的样式

.container{
    max-width: 10000px;
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    transform-style: preserve-3d;   
}

设置container容器的最大宽度为10000像素，再将容器设置为弹性布局，最后重点来了，通过transform-style: preserve-3d来设置3D变换效果，使得子元素可以应用3D变换效果。

最终，这段CSS代码定义了一个具有弹性布局并且可以进行3D变换的容器。

再来看看card卡片的样式。

.container .card{
    ......
    display: flex;
    align-items: center;
    justify-content: center;
    ......
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    .....
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

关于比较简单的样式这里就不过多介绍了，主要介绍重要的属性。这里依旧设置了元素的显示方式为flex布局，使其子元素水平和垂直居中。再添加一个阴影效果，使元素看起来有立体感。最后将元素的变换样式为3D效果，并设置元素的过渡效果为0.5秒的变换动画。这样的话可以使选中的元素具有立体感和动画效果。

关于h2包裹的样式这里也不过多介绍了，比较简单，都是一些基础的样式，完整代码可以去码上掘金自取。接下来我们来看看如何设计:hover吧，让卡片组能够感应方向。

container:hover .card{
    transform: perspective(500px) rotateY(30deg);
}
.container .card:hover{
    transform: perspective(500px) rotateY(0deg);
}
.container .card:hover ~ .card{
    transform: perspective(500px) rotateY(-30deg);
}
.container .card:hover h2{
    background: #fff;
    color: #2196f3;
    box-shadow: 0 0 0 150px #2196f3;
}

这里就是用来实现当鼠标悬停在容器中的卡片上时的效果。总共有四段代码，接下来会分别说明一下这四段代码到底起了什么作用，大家可以结合效果一起来理解。

当鼠标悬停在容器的卡片上时，通过transform属性对卡片进行旋转，使其绕Y轴旋转30度；当鼠标悬停在容器的卡片上时，通过transform属性将卡片恢复到原来的位置，即Y轴旋转角度为0度；当鼠标悬停在容器的卡片上时，通过transform属性对卡片的下一个兄弟元素（即同级的下一个卡片）进行旋转，使其绕Y轴旋转 -30度。这里就是实现方向感应的关键了，将效果作用到卡片的下一个兄弟元素（即同级的下一个卡片）；当鼠标悬停在容器的卡片上时，对卡片中的h2元素进行样式修改，包括修改背景颜色、文字颜色和添加阴影效果。

总体来说，这段代码实现了当鼠标悬停在容器的卡片上时，通过旋转和样式修改的方式，给用户一种立体翻转和突出的视觉效果。

总结

以上就是整个效果的实现过程了。通过纯CSS实现一个看似需要JS的一个控制效果，从某种程度上讲还是有点高级的，这里比较重要的属性是perspective，可以把它称为透视效果，是我们这段效果实现的关键属性。

对于该效果大家可以多花点时间去理解一下，也可以去编写代码尝试一下，完整代码在码上掘金里，如果有需要可以自取。另外，如果有什么疑问，可以在评论区里告诉我~

avatar
文章
阅读
粉丝