【HTML+CSS】3D卡片，给你不一样的视觉体验

实例：3D卡片，给你不一样的视觉体验

技术：HTML+CSS

结构剖析：

基本结构：此插件由三张卡片和两段文本组成。

颜色代码：#e0c7e3,#badbe9 #fff

HTML:

首先我们设置一个相同的类名，因为三个卡片是一样的，以card为名称的类名，在card里嵌套两个单独的类名before和behind和用以添加文本。

CSS:卡片位置确定

设置类名body，使用弹性布局，让页面元素水平+垂直居中，使用代码display: flex; justify-content: center; align-items: center; height:100vh; perspective: 1000px;

代码解释：perspective: ;定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

CSS:设置卡片样式

类名:首先在css里设置出类名 .car

宽度和高度：

使用代码width: ;height: ;设置出一个宽度为300px高度为450px的卡片.

圆角：使用圆角代码margin-right:;设置像素为50px。

子元素需要绝对定位，父元素需要相对定位，所以在.car里需要加上相对定位position: relative;以便后续的操作。

HTML:

文本：在car里的两个类名里文本，为了方便，我选择的文本是HTML+CSS和求点赞和求收藏，求关注，求评论设置p标签并添加文本。

CSS:文本样式

前面提到子元素需要绝对定位，所以添加类名.before,.behind后添加绝对定位position:absolute;

接下来，我们就要设置文本样式了。

文本居中：

我们首先使用定位代码和宽高，top：0；left：0；width:100%;

height:100%;这里使用定位代码和宽高的代码是使得文本和父元素的宽高相同，接下来就要使用弹性布局，完善文本样式，首先使用display: flex; 和flex-direction: column;还要加一个背景颜色代码background-color：；为白色#fff。

背景色:

背景色为渐变色,这里使用代码，background-image: linear-gradient();颜色代码为#e0c7e3,#badbe9，这样我们就得到了一张渐变色的卡片。

圆角：使用圆角代码margin-right:;设置像素为50px。

注：flex-direction: column;意为属性规定灵活项目的方向。

那么现在子元素垂直陈列，那么就要使用代码align-items: center;让子元素水平居中。除了这样，还要使用代码justify-content: space-around;平均分配高度给每一个子元素。

文本大小：

我们这里使用代码font-size: ;设置像素为30px，这样就可以改变文本的大小。

注：    backface-visibility: hidden;隐藏被旋转的 div 元素的背面

        到了这里，我们的卡片设置就完成了一半了，接下来我们就要设置3D效果了。

3D盒子：

设置类名:behind，使用代码transform: rotateY(180deg);，因为背面卡片要到后面去，所以我们给背面卡片加一个沿Y轴旋转180度的属性。

接下来，前往父元素设置3D效果，使用代码transform-style: preserve-3d;这个属性是加到父元素上的，影响到的是子元素，我们还要设置animation: rotate-reverse 2.2s cubic-bezier(0.66,-0.47,0.33,1.5) forwards;代码，给卡片设置一个默认动画。

定义动画：3D盒子设置好了，我们就要设置旋转动画，使用以下代码实现旋转动画。

然后我们设置旋转动画的默认动画，也就是卡片的旋转时间使用代码animation: rotate-reverse 2.2s cubic-bezier(0.66,-0.47,0.33,1.5) forwards;设置完成后就会展示出以下效果，刷新一次，旋转一次。

                                                          这样，3D卡片就制作成功了。

HTML:

最后，将html中的div复制两次即可，在CSS .card中使用代码margin-right: ;产生40的间距，这样三个卡片就会产生距离，就会更美观了。

成品展示：

HTML:

CSS: