Impress.js 3D 幻灯片定位技术详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01029/article/details/148325769

Impress.js 3D 幻灯片定位技术详解

impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. 项目地址: https://gitcode.com/gh_mirrors/im/impress.js

概述

Impress.js 是一个基于 CSS3 转换和过渡的演示框架，允许开发者创建具有 3D 效果的演示文稿。本文将通过分析 3D 定位示例，深入讲解如何使用相对定位和旋转属性来构建复杂的 3D 幻灯片布局。

核心概念

1. 相对定位系统

在 Impress.js 中，data-rel-position="relative" 属性允许幻灯片基于前一个幻灯片的位置进行相对定位。这种方式极大地简化了复杂 3D 场景的构建：

<div id="overview" class="step overview" data-rel-position="relative" ...>

2. 3D 坐标系

Impress.js 使用三维坐标系：

data-x, data-y, data-z：定义幻灯片在空间中的位置
data-rotate-x, data-rotate-y, data-rotate-z：定义幻灯片在三个轴上的旋转角度

3. 相对属性

相对属性以 data-rel- 为前缀，表示相对于前一个幻灯片的变化：

data-rel-x, data-rel-y, data-rel-z：相对位置变化
data-rel-rotate-x/y/z：相对旋转变化
data-rel-reset：重置相对定位的基准

示例解析

1. 立方体结构

示例中构建了一个虚拟立方体，展示了如何通过相对定位创建复杂的 3D 结构：

<div id="box-front" class="step box" data-x="-3000" data-y="0" data-z="0" ...>Front</div>
<div id="box-front1" class="step box1" data-rel-reset data-rel-z="-200" data-scale="0.6">Inside Front</div>
<div id="box-right1" class="step box1" data-rel-reset data-rel-x="300" data-rel-z="-300" data-rel-rotate-y="90" data-scale="0.6">Inside Right</div>

关键点：

使用 data-rel-reset 重置相对定位基准
通过 data-rel-rotate-y="90" 实现 90 度旋转
data-scale 控制幻灯片大小

2. 环形布局

示例展示了如何创建环形排列的幻灯片：

<div id="ring1-1" class="step" data-rel-reset="all" data-x="0" data-y="0" data-z="0" data-rotate-y="10">
<div id="ring1-2" class="step" data-rel-rotate-y="45" data-rel-z="-354" data-rel-x="854">

实现原理：

第一个幻灯片定义基础位置
后续幻灯片通过相对旋转 (data-rel-rotate-y) 和位置偏移 (data-rel-z, data-rel-x) 形成环形
每个幻灯片相对于前一个旋转 45 度，形成完整的 360 度环

样式设计技巧

示例中展示了多种样式设计方法：

.step {
    /* 基础样式 */
    background-color: yellow;
    opacity: 40%;
}

.step.active {
    /* 当前活动幻灯片样式 */
    opacity: 100%;
}

.step.ring2 {
    /* 第二个环的特殊样式 */
    background-color: cyan;
}

.step.box {
    /* 立方体幻灯片的样式 */
    background-color: purple;
    opacity: 70%;
}

关键点：