让我们一起打造你的卡片收藏网站吧💳💨

Cardfolio是什么？

如何旋转名片？

概括

Cardfolio是什么？

Cardfolio! 是一个基于 Gatsby 的卡片式网站框架。

等等，什么是卡片组合包？

见下文

没错！它是一个类似名片的作品集网站。它拥有纸张的质感和旋转效果，就像一张真正的名片一样。 

当你递出自己的名片时，Cardfolio 网站的真正价值就体现出来了。下面是我的名片，想象一下你收到这张名片的情景。（如果你用手机浏览本网站，可以点击这里访问）

感觉怎么样？你可以给对方留下像你刚才那样深刻的印象😄

这次我把它作为开源软件发布在了Github上，这样任何人都可以创建自己的卡片收藏网站😙 我还设计了logo🖌

卡片夹！

如果您之前使用过 React，创建起来就非常容易！此外，您还可以自定义设计和纸张纹理。

如何旋转名片？

你可能会想

这种轮换是如何实现的？

让我解释一下。

正反两面

要制作卡片的正反两面，请按以下步骤操作。

• 分别创建前组件和后组件，并将它们堆叠在容器（卡片）下，位置：绝对定位。
• 通过 transform rotateY 将背面组件的 y 轴旋转 180 度。
• 要切换正面和背面，请旋转容器。

但是，这里有个陷阱。当它翻转过来时，会显示镜像反转的正面组件。

这是因为如果使用 transform3d 翻转 DOM，默认情况下会显示对象的背面。要解决这个问题，需要将 backface-visibility 设置为 hidden 来更改默认行为。

.frontSide {
  backface-visibility: hidden; 
}

.backSide {
  backface-visibility: hidden; 
}

这样，如果把它翻过来，正面什么也不显示，屏幕的背面就会显示为顶部。示例代码如下

根据用户操作旋转

现在，当用户拖动卡片时，卡片会旋转。首先，要检测拖动操作，可以使用 react-use-gesture 中的 useDrag hook 轻松实现。

import { useSpring } from 'react-spring'
...
const bind = useDrag(({ down, movement: [moveX], last }) => {
  ...
})

当检测到拖拽时，当前 x 坐标转换为 y 轴角度，卡片旋转。

   // convert Xposition to degree
   const degree = lastDegree + moveXToDegree(moveX)
...
　 // in draggin
  if (down) {
    // rotate as user dragging
    set({ transform: `rotateY(${degree}deg)` })
    return degree
  }
...

此外，当用户松开手指时，需要通过动画（使用ReactSpring）使其回到正面或水平方向。决策逻辑如下图所示。

• 在第一象限或第三象限，减小角度。
• 在第二象限和第四象限，增大角度。

if (last) {
  // judge back or front and set degree
  const horizontalDegree = calcHorizontalDegreeToReturn(degree)
  setDegree(horizontalDegree)
}

详情请参阅源代码。

概括

怎么样？Gatsby 是一个很棒的框架，可以用来搭建日常网站，而且基于 Gatsby 构建开源软件也是个好主意，因为你可以一边开发一边享受 Gatsby 的各种优势🎁
我希望这篇文章的读者中有人能用 Cardfolio 搭建自己的卡片收藏网站！