饥人谷Wiki

站点工具

用户工具

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

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

到此差别页面的链接

后一修订版 		前一修订版
css3d_盒子 [2021/12/21 15:35]
若愚 创建 		css3d_盒子 [2021/12/21 15:38]
若愚
行 1: 行 1:
 +# CSS 3D 转换
 ## 盒子 ## 盒子
 +
 +###### 目录 
 +- [介绍](CSS3D/介绍)
 +- [透视](CSS3D/透视)
 +- [3D transform 函数](CSS3D/3Dtransform函数)
 +- [卡片翻转](CSS3D/卡片翻转)
 +- [立方体](CSS3D/立方体)
 +- **[盒子](CSS3D/盒子)**
 +- [旋转木马](CSS3D/旋转木马)
 +- [总结](CSS3D/总结)
 +- [返回列表](document/css3d)
 +
 立方体对象很容易生成，因为我们只需要担心一个度量。但是我们将如何处理一个不规则的直角立方体呢？举个例子，让我们尝试制作一个 300px 宽、200px 高和 100px 深的盒子。 立方体对象很容易生成，因为我们只需要担心一个度量。但是我们将如何处理一个不规则的直角立方体呢？举个例子，让我们尝试制作一个 300px 宽、200px 高和 100px 深的盒子。
  
 HTML结构依旧保持不变。 HTML结构依旧保持不变。
- 
 ```html ```html
 <div class="scene"> <div class="scene">
行 18: 行 30:
 同为立方体，但宽高和深度改变，` width: 300px`，`height: 200px`，因`.box`深度是100px，所以设置`translateZ(-50px)`。 同为立方体，但宽高和深度改变，` width: 300px`，`height: 200px`，因`.box`深度是100px，所以设置`translateZ(-50px)`。
  
-```+```css
 .scene { .scene {
   width: 300px;   width: 300px;
行 51: 行 63:
 } }
 ``` ```
-正面 背部 对 剩下 最佳 底部+![](css3d-box-1.png)
  
 设置`position: absolute`到各个面，让各个面都在`.box`左上角重叠。 设置`position: absolute`到各个面，让各个面都在`.box`左上角重叠。
  
-正面背部对剩下最佳底部+![](css3d-box-2.png)
  
 为了在 3D 中从盒子的中心平移出面，我们需要将面居中。我们可以通过添加`top`和`left`定位样式来做到这一点。`.box__face--left`和`.box__face--right`需要设置定位`left: 100px`。`.box__face--top`和`.box__face--bottom`需要设置定位`top: 50px`。 为了在 3D 中从盒子的中心平移出面，我们需要将面居中。我们可以通过添加`top`和`left`定位样式来做到这一点。`.box__face--left`和`.box__face--right`需要设置定位`left: 100px`。`.box__face--top`和`.box__face--bottom`需要设置定位`top: 50px`。
行 74: 行 86:
 } }
 ``` ```
-正面背部对剩下最佳底部+![](css3d-box-3.png)
  
 要在 3D 中定位各个面，旋转值可以保持之前的立方体示例相同，但对于当前这个长方体，平移值是不同怼。由于长方体的深度为 100 像素，因此正面和背面都向外移动50px。长方体的宽度 300px，所以左右面各自平移150px。长方体的高度为 200 像素，所以顶部和底部面各自平移100px。 要在 3D 中定位各个面，旋转值可以保持之前的立方体示例相同，但对于当前这个长方体，平移值是不同怼。由于长方体的深度为 100 像素，因此正面和背面都向外移动50px。长方体的宽度 300px，所以左右面各自平移150px。长方体的高度为 200 像素，所以顶部和底部面各自平移100px。
行 88: 行 100:
 .box__face--bottom { transform: rotateX(-90deg) translateZ(100px); } .box__face--bottom { transform: rotateX(-90deg) translateZ(100px); }
 ``` ```
-正面背部对剩下最佳底部+![](css3d-box-4.png)
  
 就像立方体的例子，要暴露一个面，`#box`需要有一个样式来反转变换。同时设置`translateZ`和`rotate`值来展示其相对应的面。 就像立方体的例子，要暴露一个面，`#box`需要有一个样式来反转变换。同时设置`translateZ`和`rotate`值来展示其相对应的面。
行 100: 行 112:
 .box.show-bottom { transform: translateZ(-100px) rotateX(  90deg); } .box.show-bottom { transform: translateZ(-100px) rotateX(  90deg); }
 ``` ```
-正面背部对剩下最佳底部+![](css3d-box-5.png) 
 + 
 +[在 CodePen 上编辑此演示](https://codepen.io/desandro/pen/MGpMOV)
  
若愚 · 2021/12/21 15:38 · css3d_盒子.txt
公众号 | 前端交流群 | 饥人谷版权所有 | 购买课程

页面工具