如何在WordPress中使用Droip构建沉浸式3D环形轮播图

平面轮播图很不错，但如果你的卡片能在WordPress网站上像行星一样在3D空间中漂浮和环绕呢？

你没听错。现代无代码建站工具Droip现在可以在WordPress中设计沉浸式3D交互，无需任何第三方插件或编码。

在本教程中，你将在Droip的可视化编辑器中构建一个3D环形轮播（一个旋转的卡片环，卡片会倾斜、环绕，感觉栩栩如生）。

我们要构建什么

想象一个直立在你面前的呼啦圈。

现在，将12张卡片均匀地放在那个环上。当环旋转时，卡片会环绕移动，有些面向你，有些倾斜远离，后面的卡片在透视中隐藏。

使用Droip的高级交互功能，你只需一点数学知识就能创建这种引人注目的3D效果。

这就是我们要创造的错觉。一个使用Droip高级变换和动画工具的动态3D卡片环。你可以使用这个3D轮播来展示作品集、产品或创意内容。

第1部分：规划关键组件

在我们开始创建之前，让我们规划一下使3D环形轮播工作所需的组件：

• 舞台（环）：一个旋转的父元素，承载所有卡片
• 卡片（环绕项目）：每张卡片围绕圆圈固定在特定角度
• 透视：视觉深度设置，使近处的卡片看起来更近，远处的卡片更小
• 倾斜：微妙的旋转，赋予运动真实感
• 动画：使环无限轨道运行的连续旋转

在圆圈周围间隔卡片

我们将在360°环上有12张卡片，意味着每张卡片相隔30°。可以想象成时钟位置：

• 卡片0：0°（前面）
• 卡片3：90°（右侧）
• 卡片6：180°（后面）
• 卡片9：270°（左侧）

每张卡片将通过其角度旋转并向外推以形成圆形环。

3D变换

每张卡片使用变换组合来正确定位： rotateY(angle), moveZ(radius)

以下是发生的情况：

• rotateY(angle)：将卡片旋转到其在圆圈周围的位置
• moveZ(radius)：将其从中心向外移动到环上

这就是将卡片均匀放置在圆圈中所需的全部。

为什么先旋转再移动？

如果你先移动Z然后旋转Y，变换会在元素的原始空间中发生；之后旋转会使该变换偏移围绕原点旋转，产生不同的效果。

rotateY(angle)后跟moveZ(radius)意味着"将元素转向角度，然后沿其前进方向推出"，将其放置在圆周上。

第2部分：在Droip可视化编辑器中构建3D环形轮播

现在你了解了结构的工作原理，让我们开始在Droip中可视化地构建一切。

步骤1：创建包装器和基础布局

• 添加一个Div并将其重命名为Wrapper
• 设置宽度：100%，高度：100vh，并选择一个漂亮的背景（纯色或渐变）
• 在其中添加两个子元素：
  • 自定义光标（可选）
  • Banner（包含我们3D轮播的部分）

步骤2：创建自定义光标（可选）

接下来，我们将添加一个自定义光标。完全可选，但它能为你的构建增添独特的触感和精致度。

• 在Wrapper内部，添加一个Div并将其重命名为Cursor
• 尺寸：32×32px，位置设为absolute，top：0，left：0，z-index：100
• 在Cursor div内添加一个Shape元素（你的光标视觉）。将形状元素调整为32×32px

对于交互（使这个自定义形状像光标一样行动）：

• 选择Cursor div并点击交互
• 触发器：滚动进入视图
• 动画：光标轨迹
• 范围：视口
• 平滑度：75%

现在你的光标将在预览模式下平滑跟随你的移动。

步骤3：创建Banner（轮播的基础）

在Wrapper内部，添加另一个Div并将其重命名为Banner。 设置以下属性：

• 宽度：100vw
• 高度：100vh
• 位置：relative
• Z-index：1

这个Banner将作为你3D轮播的主要舞台。

步骤4：创建容器和3D变换包装器

现在是设置将保存和控制我们3D元素的结构的时候了。

在Banner内部，添加一个Div并将其重命名为Container。这将作为3D舞台的主要布局持有者。

配置容器：

• 宽度：100%
• 最大宽度：800px
• 边距：auto（使其在页面上居中）
• 位置：relative
• Z-index：2

接下来，在Container内部，添加另一个Div并将其重命名为3D Transform。这个元素将定义所有卡片将环绕的3D空间。

设置以下属性：

• 宽度/高度：100%
• 位置：absolute；top：0；left：0
• Z-index：100

现在，在效果 > 变换面板中：

• 启用Preserve 3D：确保所有子元素（如你的卡片）存在于真正的3D环境中
• 将Child Perspective设置为9000px：这给出深度的错觉，近处的物体看起来更大，远处的物体看起来更小
• 可选地，应用Scale X/Y：0.8，如果你想稍微减小整体舞台尺寸

简而言之，这一步创建了你的旋转卡片将存在的3D"空间"——就像在表演开始前搭建舞台一样。

步骤5：创建3D轮播（轨道中心）

现在我们将创建轮播的核心，即旋转舞台，所有卡片都将附着在上面。

在3D Transform内部，添加一个Div并将其重命名为3D Marquee。这个元素充当轨道中心。当它旋转时，所有卡片将围绕它旋转。

设置3D Marquee如下：

• 宽度：435px。这将是卡片的大小
• 高度：auto
• 位置：relative
• 启用Preserve 3D（使其子元素，卡片，在3D空间中保持深度）
• 旋转X：-10°——这稍微向后倾斜环，从前面观看时给出更自然的透视
• 缩放：X：1，Y：1

简单来说：这是你的旋转中心。当动画运行时，这个元素将连续旋转，携带所有卡片，创建平滑、环绕的3D效果。

步骤6：创建卡片模板（单张卡片结构）

接下来，我们将构建一张卡片作为模板。完成后，我们将复制它11次以完成环。

1. 创建正面卡片

在3D Marquee内部，添加一个Div并将其重命名为Front Card。 配置它：

• 宽度/高度：100%（最终位置将通过变换控制）
• 边框半径：20px
• 位置：absolute
• 在变换面板中启用Preserve 3D

注意：这是你将稍后应用rotateY(...) translateZ(orbitZ)来围绕圆圈定位它的元素。

2. 添加3D容器

在Front Card内部，添加另一个Div并将其重命名为Card-3D。这充当3D包装器，这样我们可以在不影晌其内部布局的情况下在空间中旋转和定位卡片。

设置：

• 宽度/高度：100%
• 位置：relative
• Z-index：3
• 启用Preserve 3D

3. 添加弹出窗口（可见正面）

在Card-3D内部，添加一个Div并将其重命名为Popup。这保存主要内容，用户与之交互的图像或设计。

设置：

• 宽度/高度：100%
• 背景：白色
• 边框半径：20px

在Popup内部，添加一个图像元素：

• 宽度/高度：100%
• 边框半径：12px

4. 添加背面

在Popup内部，添加另一个Div并将其重命名为Backface。

设置：

• 内边距：12px
• 宽度/高度：100%
• 背景：#FEDEFF
• 边框半径：20px
• 位置：absolute；top：0；left：0；z-index：1
• 变换：旋转Y = 180°（这样当卡片翻转时出现）
• 通过切换背面可见性禁用显示真实背面

现在你有一张完整的单张卡片准备好被复制并围绕轨道定位。每张卡片将继承我们将在下一步设置的3D旋转和间距。

步骤7：复制卡片并围绕轨道定位

现在我们有一张单张卡片准备好了，我们将为轮播创建所有12张卡片并将它们均匀地放置在圆形轨道周围。

复制卡片模板

• 右键单击你的Front Card并选择Duplicate。这会创建一张新卡片，复制原始卡片的所有样式
• 复制包含变换样式的类。这为新卡片提供其自己独立的旋转/位置类
• 重复此操作11次，这样你就有Card-1到Card-12。重命名卡片

💡 提示：复制卡片类很重要，这样每张卡的变换是独立的。

使用3D变换设置每张卡片的位置

对于每张卡片，设置变换字段（旋转Y + 移动Z）。使用这些精确值：

• Front Card: rotateY(0deg), MoveZ(850px)
• Card 1: rotateY(30deg), MoveZ(850px)
• Card 2: rotateY(60deg), MoveZ(850px)
• Card 3: rotateY(90deg), MoveZ(850px)
• Card 4: rotateY(120deg), MoveZ(850px)
• Card 5: rotateY(150deg), MoveZ(850px)
• Card 6: rotateY(180deg), MoveZ(850px)
• Card 7: rotateY(-150deg), MoveZ(850px)
• Card 8: rotateY(-120deg), MoveZ(850px)
• Card 9: rotateY(-90deg), MoveZ(850px)
• Card 10: rotateY(-60deg), MoveZ(850px)
• Card 11: rotateY(-30deg), MoveZ(850px)

此时，如果Preserve 3D和Perspective正确设置，你应该在3D空间中看到一个卡片环。

步骤8：动画化轨道（旋转3D轮播）

现在你的卡片都就位了，让我们通过使其旋转来赋予轮播生命。

• 在图层面板中，选择Page，然后转到Interactions并选择Page Load
• 选择3D Marquee div作为你的动画目标——这是包含所有卡片的父元素
• 添加一个Rotate动作并设置这些值：
  • 持续时间：30s（或你喜欢的任何速度）
  • X：-10°
  • Y：360°
  • 循环：无限

点击Preview，你将看到你的整个3D环在空间中平滑旋转——就像一个旋转的轮播！

💡 提示：-10°的倾斜使旋转看起来自然，并为轨道增添深度，而不是平坦的俯视旋转。

步骤9：在Banner上添加点击缩放交互（缩放切换）

让我们通过添加点击缩放效果使你的3D轮播更有趣，这样用户可以通过单次点击放大和缩小轮播。

• 选择Banner。这是包含你3D轮播的背景容器
• 转到Interactions并创建一个新的：
  • 触发器：鼠标点击（点击）
  • 目标：3D Transform

Banner充当可点击区域。当你点击它时，动画以3D Transform div为目标（包含3D场景内的所有内容）。

现在我们将设置一个两步切换动画：

步骤1：第一次点击

创建两个响应并将其命名为：

• 放大
• 放大（平板）

我们同时创建放大/缩小和放大/缩小（平板）版本，因为桌面和平板屏幕行为不同。在宽桌面上看起来完美的缩放值可能会在较小的平板屏幕上将3D环推出视图或看起来过大。

因此，通过拥有两个版本，Droip根据设备自动应用正确的动画，在所有视口上保持缩放效果居中且平衡。

放大：

• 缩放X：2，Y：2
• 移动Y：-250

放大（平板）：

• 缩放X：1，Y：1
• 移动Y：0

步骤2：第二次点击（缩小）

复制第一组并将其重命名为：

• 缩小
• 缩小（平板）

缩小：

• 缩放X：0.8，Y：0.8
• 移动Y：0

缩小（平板）：

• 缩放X：0.4，Y：0.4
• 移动Y：0

现在，当你点击Banner上的任何位置时，整个3D场景会平滑放大和缩小，使其感觉生动且响应灵敏。

💡 提示：调整缩放和移动值，为桌面和平板视图找到完美的缩放平衡。

最终预览

就是这样！你刚刚在Droip中构建了一个完全交互式的3D环形轮播，无需代码，无需插件。

起初可能看起来很多，但一旦你掌握了它，你会意识到Droip给了你多少力量。

使用这个现代WordPress建站工具，几乎所有高级网页交互现在都可以在WordPress中实现，全部可视化。