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

概述

平面轮播很常见，但如果你的卡片能在WordPress网站中像行星一样在3D空间中漂浮和轨道运行呢？Droip作为现代无代码网站构建器，现在可以在不需要任何第三方插件或编码的情况下，在WordPress中设计沉浸式3D交互效果。

在本教程中，您将在Droip的可视化编辑器中构建一个3D圆形跑马灯（一个旋转的卡片环，具有倾斜、轨道运动效果）。

构建内容预览

想象一个直立在你面前的呼啦圈，现在将12张卡片均匀地放置在那个环上。当环旋转时，卡片围绕移动，有些面向你，有些倾斜远离，后面的卡片在透视中隐藏。

通过Droip的高级交互功能，您只需一些数学计算即可创建这种引人注目的3D效果。

第一部分：规划关键组件

在开始创建之前，让我们规划使3D圆形跑马灯工作所需的组件：

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

在圆圈周围间隔卡片

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

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

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

3D变换

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

这是发生的情况：

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

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

为什么先旋转后移动？

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

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

第二部分：在Droip可视化编辑器中构建3D圆形跑马灯

现在您了解了结构的工作原理，让我们开始在Droip中可视化构建所有内容。

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

• 添加Div并将其重命名为Wrapper
• 设置宽度：100%，高度：100vh，并选择良好的背景（纯色或渐变）
• 在其中添加两个子项：
  • 自定义光标（可选）
  • 横幅（包含我们的3D跑马灯的部分）

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

接下来，我们将添加自定义光标。完全可选，但它为您的构建增添额外的独特性和精致感。

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

对于交互（使此自定义形状像光标一样行为）：

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

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

步骤3：创建横幅（跑马灯的基础）

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

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

此横幅将作为您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作为您的动画目标——这是保存所有卡片的父元素。
• 添加旋转动作并设置这些值：
  • 持续时间：30s（或您喜欢的任何速度）
  • X：-10°
  • Y：360°
  • 循环：无限

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

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

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

让我们通过添加点击缩放效果使您的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网站构建器，几乎所有高级Web交互现在都可以在WordPress中实现，全部可视化。