====== 差别 ======
这里会显示出您选择的修订版和当前版本之间的差别。
后一修订版 | 前一修订版 | ||
css3d_立方体 [2021/12/21 15:00] 若愚 创建 |
css3d_立方体 [2021/12/21 15:13] (当前版本) 若愚 |
||
---|---|---|---|
行 1: | 行 1: | ||
+ | # CSS 3D 转换 | ||
## 立方体 | ## 立方体 | ||
+ | |||
+ | ###### 目录 | ||
+ | - [介绍](CSS3D/ | ||
+ | - [透视](CSS3D/ | ||
+ | - [3D transform 函数](CSS3D/ | ||
+ | - [卡片翻转](CSS3D/ | ||
+ | - **[立方体](CSS3D/ | ||
+ | - [盒子](CSS3D/ | ||
+ | - [旋转木马](CSS3D/ | ||
+ | - [总结](CSS3D/ | ||
+ | - [返回列表](document/ | ||
+ | |||
+ | |||
卡片是使用 3D 变换的良好起步,但它们只在使用过渡的时候展示 3D效果。为了在静止的状态下展示3D,我们必须创建真正的3D对象:棱柱体。我们将从一个立方体开始。 | 卡片是使用 3D 变换的良好起步,但它们只在使用过渡的时候展示 3D效果。为了在静止的状态下展示3D,我们必须创建真正的3D对象:棱柱体。我们将从一个立方体开始。 | ||
行 16: | 行 30: | ||
</ | </ | ||
``` | ``` | ||
- | 前面 返回 右 左 返回页首 底 | + | ![](wiki: |
在容器里设置6 个面的基本的位置和尺寸样式,并让他们彼此叠加。 | 在容器里设置6 个面的基本的位置和尺寸样式,并让他们彼此叠加。 | ||
- | ```html | + | ```css |
.scene { | .scene { | ||
width: 200px; | width: 200px; | ||
行 42: | 行 56: | ||
``` | ``` | ||
- | 前面返回右左返回页首底 | + | ![](wiki: |
所有面彼此覆盖,准备旋转。`.cube__face--top`和`.cube__face--bottom`将使用`rotateX()`让它们垂直围绕X轴旋转。 | 所有面彼此覆盖,准备旋转。`.cube__face--top`和`.cube__face--bottom`将使用`rotateX()`让它们垂直围绕X轴旋转。 | ||
行 54: | 行 68: | ||
.cube__face--bottom { transform: rotateX(-90deg); | .cube__face--bottom { transform: rotateX(-90deg); | ||
``` | ``` | ||
- | 前面返回右左返回页首底 | + | ![](wiki: |
(我们可以删除样式,因为此转换不起作用,但为了保持一致性,让我们将其保留下来。rotateY( 0deg) | (我们可以删除样式,因为此转换不起作用,但为了保持一致性,让我们将其保留下来。rotateY( 0deg) | ||
行 68: | 行 82: | ||
.cube__face--bottom { transform: rotateX(-90deg) translateZ(100px); | .cube__face--bottom { transform: rotateX(-90deg) translateZ(100px); | ||
``` | ``` | ||
- | 前面右返回左返回页首底 | + | ![](wiki: |
这里需要注意的是`translate`函数紧随`rotate`之后。转换函数的顺序是有意义的,每个面首先向其位置旋转,然后向外偏移。 | 这里需要注意的是`translate`函数紧随`rotate`之后。转换函数的顺序是有意义的,每个面首先向其位置旋转,然后向外偏移。 | ||
行 93: | 行 107: | ||
``` | ``` | ||
- | 前面右返回左返回页首底 | + | ![](wiki: |
## 旋转立方体 | ## 旋转立方体 | ||
行 113: | 行 127: | ||
.cube { transition: transform 1s; } | .cube { transition: transform 1s; } | ||
``` | ``` | ||
- | 前面返回右左返回页首底 | ||
- | 前右后左上下 | ||
- | 在 CodePen 上编辑此演示 | ||
- | CSS 3D 立方体对象改变侧面 | + | [在 CodePen 上编辑此演示](https:// |
+ | |||