饥人谷Wiki

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

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

--- css3d_立方体 [2021/12/21 15:00]
若愚创建
+++ css3d_立方体 [2021/12/21 15:02]
若愚
@@ 行 16: / 行 16: @@
 </div>
 ```
-前面 返回 右 左 返回页首 底
+![](wiki:css3d-cube-1.png)
 在容器里设置6 个面的基本的位置和尺寸样式，并让他们彼此叠加。
-```html
+```css
 .scene {
   width: 200px;
@@ 行 42: / 行 42: @@
 ```
-前面返回右左返回页首底
+![](wiki:css3d-cube-2.png)
 所有面彼此覆盖，准备旋转。`.cube__face--top`和`.cube__face--bottom`将使用`rotateX()`让它们垂直围绕X轴旋转。
@@ 行 54: / 行 54: @@
 .cube__face--bottom { transform: rotateX(-90deg); }
 ```
-前面返回右左返回页首底
+![](wiki:css3d-cube-3.png)
 （我们可以删除样式，因为此转换不起作用，但为了保持一致性，让我们将其保留下来。rotateY( 0deg)
@@ 行 68: / 行 68: @@
 .cube__face--bottom { transform: rotateX(-90deg) translateZ(100px); }
 ```
-前面右返回左返回页首底
+![](wiki:css3d-cube-4.png)
 这里需要注意的是`translate`函数紧随`rotate`之后。转换函数的顺序是有意义的，每个面首先向其位置旋转，然后向外偏移。
@@ 行 93: / 行 93: @@
 ```
-前面右返回左返回页首底
+![](wiki:css3d-cube-5.png)
 ## 旋转立方体
@@ 行 113: / 行 113: @@
 .cube { transition: transform 1s; }
 ```
-前面返回右左返回页首底
-前右后左上下
- 在 CodePen 上编辑此演示
-CSS 3D 立方体对象改变侧面
+ [在 CodePen 上编辑此演示](https://codepen.io/desandro/pen/KRWjzm)

饥人谷Wiki

站点工具

用户工具

页面工具