饥人谷Wiki

====== 差别 ======

这里会显示出您选择的修订版和当前版本之间的差别。

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

饥人谷Wiki

站点工具

用户工具

页面工具