translateX(0)是个啥？ translateX(100%)呢？
-webkit-transform是个啥？ transform又是个啥
.mr-tab-panel {
position: absolute;
top: 0;
width: 100%;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.mr-tab-panel.mr-active {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.mr-tab-panel.mr-active ~ .mr-tab-panel {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}工作原理：
左侧面板：向左偏移 100%（在左边隐藏）
当前面板：偏移 0%（正常显示）
右侧面板：向右偏移 100%（在右边隐藏）
切换时产生左右滑动的视觉效果。
CSS Transform 和 TranslateX 详细讲解
您问的这些问题非常核心！让我逐一详细解释。
一、transform 是什么？
含义
transform 是 CSS 的一个标准属性，用于对元素进行2D或3D变换，包括：移动、旋转、缩放、倾斜等。
词源
transform = trans（改变）+ form（形状）→ 改变形状
是自定义的还是规定好的？
是 W3C 规定的 CSS 标准属性，不是自定义的。所有现代浏览器都支持。
常用变换函数
| 函数 | 作用 | 示例 |
|---|---|---|
translateX() | 水平移动 | transform: translateX(100px) |
translateY() | 垂直移动 | transform: translateY(50px) |
translate() | 同时移动 | transform: translate(100px, 50px) |
rotate() | 旋转 | transform: rotate(45deg) |
scale() | 缩放 | transform: scale(1.5) |
二、-webkit-transform 是什么？
含义
-webkit-transform 是带有浏览器私有前缀的 transform 属性。
为什么需要私有前缀？
在 CSS3 新特性刚推出时，不同浏览器的支持程度不同，厂商会在属性名前加上自己的前缀来提前实现这些特性。
| 前缀 | 浏览器 |
|---|---|
-webkit- | Chrome、Safari、Edge（新版） |
-moz- | Firefox |
-ms- | IE、旧版 Edge |
-o- | Opera |
写法演变
css
/* 旧写法（为了兼容老浏览器） */-webkit-transform: translateX(0); /* Chrome/Safari */ -moz-transform: translateX(0); /* Firefox */ -ms-transform: translateX(0); /* IE */ -o-transform: translateX(0); /* Opera */ transform: translateX(0); /* 标准写法 *//* 现代写法（只写标准） */transform: translateX(0);
现在还需要写前缀吗？
大部分情况下不需要了。现代浏览器（Chrome 36+、Firefox 16+、Edge 12+、Safari 9+）都完全支持无前缀的 transform。但在您的代码中，为了兼容老版本浏览器，仍然保留了 -webkit- 前缀。
三、translateX(0) 是什么意思？
含义
translateX(0) 表示元素在水平方向上移动 0 像素，即保持原位不动。
词源
translate = 移动、平移
X = 水平方向（X 轴）
(0) = 移动距离为 0
示意图
text
移动前： 移动后（translateX(0)）： ┌─────────────────┐ ┌─────────────────┐ │ │ │ │ │ ┌───────┐ │ │ ┌───────┐ │ │ │ 元素 │ │ → │ │ 元素 │ │ │ └───────┘ │ │ └───────┘ │ │ │ │ │ └─────────────────┘ └─────────────────┘ 位置不变
四、translateX(100%) 是什么意思？
含义
translateX(100%) 表示元素在水平方向上向右移动自身宽度的 100%。
百分比的含义
100%是相对于元素自身的宽度，而不是父容器如果元素宽度是 200px，
translateX(100%)就是向右移动 200px
示意图
text
移动前： 移动后（translateX(100%)）： ┌─────────────────────┐ ┌─────────────────────┐ │ │ │ │ │ ┌───────┐ │ → │ ┌───────┐ │ │ │ 元素 │ │ │ │ 元素 │ │ │ │100px │ │ │ │100px │ │ │ └───────┘ │ │ └───────┘ │ │ ← 100px → │ │ ← 100px → │ └─────────────────────┘ └─────────────────────┘ 向右移动了100px
五、translateX(-100%) 是什么意思？
含义
translateX(-100%) 表示元素在水平方向上向左移动自身宽度的 100%。
示意图
text
移动前： 移动后（translateX(-100%)）： ┌─────────────────────┐ ┌─────────────────────┐ │ │ │ │ │ ┌───────┐ │ → │ ┌───────┐ │ │ │ 元素 │ │ │ │ 元素 │ │ │ │100px │ │ │ │100px │ │ │ └───────┘ │ │ └───────┘ │ │ ← 100px → │ │ ← 100px → │ └─────────────────────┘ └─────────────────────┘ 向左移动了100px
六、三种位置的完整对比
| 值 | 位置 | 示意图 |
|---|---|---|
translateX(-100%) | 向左移出（左侧隐藏） | [元素]______ |
translateX(0) | 正常位置（显示） | ___[元素]___ |
translateX(100%) | 向右移出（右侧隐藏） | ______[元素] |
七、选项卡切换的完整原理
初始状态（第一个面板显示）
css
/* 第一个面板：显示在正常位置 */.mr-tab-panel.mr-active {
transform: translateX(0);}/* 第二个面板：隐藏在右侧 */.mr-tab-panel.mr-active ~ .mr-tab-panel {
transform: translateX(100%);}/* 第三个面板：也隐藏在右侧 */切换到第二个面板时
css
/* 第一个面板：向左移出 */.mr-tab-panel {
transform: translateX(-100%);}/* 第二个面板：移动到正常位置 */.mr-tab-panel.mr-active {
transform: translateX(0);}/* 第三个面板：仍然在右侧 */视觉流程图
text
初始状态（显示面板1）： ┌─────────────────────────────────────────────┐ │ [面板1] [面板2] [面板3] │ │ translateX(0) translateX(100%) translateX(100%) │ │ ↑ 显示 ↑ 右侧隐藏 ↑ 右侧隐藏 │ └─────────────────────────────────────────────┘ 切换到面板2： ┌─────────────────────────────────────────────┐ │ [面板1] [面板2] [面板3] │ │ translateX(-100%) translateX(0) translateX(100%) │ │ ↑ 左侧隐藏 ↑ 显示 ↑ 右侧隐藏 │ └─────────────────────────────────────────────┘
八、transition 的作用
css
transition: transform 0.3s;
这行代码让 transform 属性的变化不是瞬间完成，而是在 0.3 秒内平滑过渡。
效果：
没有
transition：面板瞬间跳转有
transition：面板平滑滑动到新位置，产生丝滑的滑动效果
九、代码中的选择器解释
css
.mr-tab-panel.mr-active ~ .mr-tab-panel
~ 是什么？
~ 是 CSS 的通用兄弟选择器，表示选择同一个父元素下、在指定元素之后的所有兄弟元素。
示例
html
<div class="parent"> <div class="mr-tab-panel mr-active">面板1</div> ← 被选中 <div class="mr-tab-panel">面板2</div> ← 被 ~ 选中 <div class="mr-tab-panel">面板3</div> ← 被 ~ 选中</div>
作用
.mr-tab-panel.mr-active ~ .mr-tab-panel 的意思是：
选择所有在激活面板之后的面板
将它们向右移出（
translateX(100%)）
十、总结
| 问题 | 答案 |
|---|---|
transform 是什么？ | CSS 标准属性，用于元素变换（移动、旋转、缩放等） |
-webkit-transform 是什么？ | 带浏览器私有前缀的 transform，用于兼容老版本 Chrome/Safari |
| 是自定义的吗？ | ❌ 不是，是 W3C 规定的 CSS 标准 |
translateX(0) 什么意思？ | 水平移动 0 像素，即保持原位 |
translateX(100%) 什么意思？ | 向右移动自身宽度的 100% |
translateX(-100%) 什么意思？ | 向左移动自身宽度的 100% |
transition 的作用？ | 让位置变化平滑过渡，产生滑动动画 |
一句话总结：transform: translateX() 是 CSS 标准属性，用于控制元素的水平位置；配合 transition 可以实现平滑的滑动效果；-webkit- 前缀是为了兼容老版本浏览器；translateX(0) 表示原位，translateX(100%) 表示向右移出，translateX(-100%) 表示向左移出，三者配合实现了选项卡的左右滑动切换效果