====== 差别 ======
这里会显示出您选择的修订版和当前版本之间的差别。
| 后一修订版 | 前一修订版 | ||
|
css3d_卡片翻转 [2021/12/13 17:34] 若愚 创建 |
css3d_卡片翻转 [2021/12/13 17:39] (当前版本) 若愚 |
||
|---|---|---|---|
| 行 1: | 行 1: | ||
| - | # 卡片翻转 | + | # CSS 3D 转换 |
| + | ## # 卡片翻转 | ||
| + | |||
| + | ###### 目录 | ||
| + | - [介绍](CSS3D/ | ||
| + | - [透视](CSS3D/ | ||
| + | - [3D transform 函数](CSS3D/ | ||
| + | - **[卡片翻转](CSS3D/ | ||
| + | - [立方体](CSS3D/ | ||
| + | - [盒子](CSS3D/ | ||
| + | - [旋转木马](CSS3D/ | ||
| + | - [总结](CSS3D/ | ||
| + | - [返回列表](document/ | ||
| 我们现在拥有开始制作 3D 对象的所有工具。让我们从基础开始，翻转卡片。 | 我们现在拥有开始制作 3D 对象的所有工具。让我们从基础开始，翻转卡片。 | ||
| 行 11: | 行 24: | ||
| </ | </ | ||
| ``` | ``` | ||
| - | 正面 背部 | + | 、对象(`.card`)和面(`card__face`)，设置起来会比较方便。 | `.scene`做为三维空间的容器，`.card`充当3D对象。两个单独的`.card__face`元素用于卡片的正面和背面。我建议对任何 3D 变换使用相同的套路：场景(`.scene`)、对象(`.card`)和面(`card__face`)，设置起来会比较方便。 | ||
| 行 71: | 行 84: | ||
| 现在我们有了一个可用的 3D 对象。要翻转卡片，我们可以切换class `is-flipped` 。当拥有`.is-flipped` class 时，`.card`将旋转 180 度，从而暴露`.card__face--back`。 | 现在我们有了一个可用的 3D 对象。要翻转卡片，我们可以切换class `is-flipped` 。当拥有`.is-flipped` class 时，`.card`将旋转 180 度，从而暴露`.card__face--back`。 | ||
| - | 正面背部 | ||
| - | 点击卡片翻转。 | ||
| - | 在 CodePen 上编辑此演示 | + | [在 CodePen 上编辑此演示](https:// |
| - | 3D卡片翻转过渡 | + | 
