====== 差别 ======
这里会显示出您选择的修订版和当前版本之间的差别。
后一修订版 | 前一修订版 上一修订版 两侧同时换到之后的修订记录 | ||
css3d_盒子 [2021/12/21 15:35] 若愚 创建 |
css3d_盒子 [2021/12/21 15:37] 若愚 |
||
---|---|---|---|
行 1: | 行 1: | ||
+ | # CSS 3D 转换 | ||
## 盒子 | ## 盒子 | ||
+ | |||
+ | ###### 目录 | ||
+ | - [介绍](CSS3D/ | ||
+ | - [透视](CSS3D/ | ||
+ | - [3D transform 函数](CSS3D/ | ||
+ | - [卡片翻转](CSS3D/ | ||
+ | - [立方体](CSS3D/ | ||
+ | - **[盒子](CSS3D/ | ||
+ | - [旋转木马](CSS3D/ | ||
+ | - [总结](CSS3D/ | ||
+ | - [返回列表](document/ | ||
+ | |||
立方体对象很容易生成,因为我们只需要担心一个度量。但是我们将如何处理一个不规则的直角立方体呢?举个例子,让我们尝试制作一个 300px 宽、200px 高和 100px 深的盒子。 | 立方体对象很容易生成,因为我们只需要担心一个度量。但是我们将如何处理一个不规则的直角立方体呢?举个例子,让我们尝试制作一个 300px 宽、200px 高和 100px 深的盒子。 | ||
行 51: | 行 64: | ||
} | } | ||
``` | ``` | ||
- | 正面 背部 对 剩下 最佳 底部 | + | ![](css3d-box-1.png) |
设置`position: | 设置`position: | ||
- | 正面背部对剩下最佳底部 | + | ![](css3d-box-2.png) |
为了在 3D 中从盒子的中心平移出面,我们需要将面居中。我们可以通过添加`top`和`left`定位样式来做到这一点。`.box__face--left`和`.box__face--right`需要设置定位`left: | 为了在 3D 中从盒子的中心平移出面,我们需要将面居中。我们可以通过添加`top`和`left`定位样式来做到这一点。`.box__face--left`和`.box__face--right`需要设置定位`left: | ||
行 74: | 行 87: | ||
} | } | ||
``` | ``` | ||
- | 正面背部对剩下最佳底部 | + | ![](css3d-box-3.png) |
要在 3D 中定位各个面,旋转值可以保持之前的立方体示例相同,但对于当前这个长方体,平移值是不同怼。由于长方体的深度为 100 像素,因此正面和背面都向外移动50px。长方体的宽度 300px,所以左右面各自平移150px。长方体的高度为 200 像素,所以顶部和底部面各自平移100px。 | 要在 3D 中定位各个面,旋转值可以保持之前的立方体示例相同,但对于当前这个长方体,平移值是不同怼。由于长方体的深度为 100 像素,因此正面和背面都向外移动50px。长方体的宽度 300px,所以左右面各自平移150px。长方体的高度为 200 像素,所以顶部和底部面各自平移100px。 | ||
行 88: | 行 101: | ||
.box__face--bottom { transform: rotateX(-90deg) translateZ(100px); | .box__face--bottom { transform: rotateX(-90deg) translateZ(100px); | ||
``` | ``` | ||
- | 正面背部对剩下最佳底部 | + | ![](css3d-box-4.png) |
就像立方体的例子,要暴露一个面,`# | 就像立方体的例子,要暴露一个面,`# | ||
行 100: | 行 113: | ||
.box.show-bottom { transform: translateZ(-100px) rotateX( | .box.show-bottom { transform: translateZ(-100px) rotateX( | ||
``` | ``` | ||
- | 正面背部对剩下最佳底部 | + | ![](css3d-box-5.png) |
+ | |||
+ | [在 CodePen 上编辑此演示](https:// | ||