====== 差别 ======
这里会显示出您选择的修订版和当前版本之间的差别。
后一修订版 两侧同时换到之后的修订记录 | |||
css3d_盒子 [2021/12/21 15:35] 若愚 创建 |
css3d_盒子 [2021/12/21 15:36] 若愚 |
||
---|---|---|---|
行 51: | 行 51: | ||
} | } | ||
``` | ``` | ||
- | 正面 背部 对 剩下 最佳 底部 | + | ![](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: | 行 74: | ||
} | } | ||
``` | ``` | ||
- | 正面背部对剩下最佳底部 | + | ![](css3d-box-3.png) |
要在 3D 中定位各个面,旋转值可以保持之前的立方体示例相同,但对于当前这个长方体,平移值是不同怼。由于长方体的深度为 100 像素,因此正面和背面都向外移动50px。长方体的宽度 300px,所以左右面各自平移150px。长方体的高度为 200 像素,所以顶部和底部面各自平移100px。 | 要在 3D 中定位各个面,旋转值可以保持之前的立方体示例相同,但对于当前这个长方体,平移值是不同怼。由于长方体的深度为 100 像素,因此正面和背面都向外移动50px。长方体的宽度 300px,所以左右面各自平移150px。长方体的高度为 200 像素,所以顶部和底部面各自平移100px。 | ||
行 88: | 行 88: | ||
.box__face--bottom { transform: rotateX(-90deg) translateZ(100px); | .box__face--bottom { transform: rotateX(-90deg) translateZ(100px); | ||
``` | ``` | ||
- | 正面背部对剩下最佳底部 | + | ![](css3d-box-4.png) |
就像立方体的例子,要暴露一个面,`# | 就像立方体的例子,要暴露一个面,`# | ||
行 100: | 行 100: | ||
.box.show-bottom { transform: translateZ(-100px) rotateX( | .box.show-bottom { transform: translateZ(-100px) rotateX( | ||
``` | ``` | ||
- | 正面背部对剩下最佳底部 | + | ![](css3d-box-5.png) |
+ | |||
+ | [在 CodePen 上编辑此演示](https:// | ||