css实现简单的3D效果

css实现简单3D房间效果

最终效果图

纯3D效果实现上述效果，总体思路就是旋转容器，为容器贴纸。

这是一个简单的3D立方体空间，我们需要四个墙壁，分别贴在上下左右，因此html结构为

<div class="container">
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
    <div class="wall"></div>
</div>

然后，针对整个container容器，我们只需要设置它铺满整个空间。然后我们需要对整个容器设置 perspective。设置这个属性整个容器才有z轴方向上的距离。

.container {
    height: 100%;
    width: 100%;
    perspective: 500px;
}

而后，继续分析四个 div.wall属性，我们需要将他们放在四个方向，当做整个空间的“墙面”。

先分析“墙面”大小，上下墙面（左右墙面）宽高应该保持一致。

上下墙面的宽应该和容器宽度一致，左右墙面的高和容器高度一致，左右墙面的宽和上下墙面的高一致。因此，我们这样设置

.wall（上下墙面）{
    width: 100%;
    height: 80vh;
}
.wall(左右墙面){
    width: 80vh;
    heigth: 100%;
}

接着将一个wall元素放在上墙面，上墙面必须和容器的y轴垂直，假设容器的高宽深为1000px, 1000px, 500px,那么上墙面应该是（x，1000px，z）这个平面。(在设计元素旋转的时候一定要清楚为什么要这样旋转)。

默认的面是（x, y, 0)。问题转化为通过旋转使得

$(x, y, 0) \rightarrow (x,1000px, z)$

两个面的夹脚为90度（面面夹角计算公式），因此旋转角度为90度。

哪个属性不发生变化，就绕哪个轴进行旋转。

保证y值始终为1000px，设置 top = 0
绕x轴旋转90度。

.wall:上墙面{
    top: 0;
    transform: rotateX(-90deg)
}

同理，可以得出下墙面和左右墙面的旋转角度。

下面，可以给墙面贴图，下载一个背景图片，然后添加到墙面上。于是则有css如下：

.container .wall:nth-child(1) {
      transform-origin: center top;
      width: 100%;
      height: 80vh;
      transform: rotateX(-90deg);
      border-top: 3vh solid cyan;
      top: 0;
      background-image: url(../images/cf.png); }
.container .wall:nth-child(2) {
      transform-origin: center bottom;
      width: 100%;
      height: 80vh;
      transform: rotateX(90deg);
      border-top: 3vh solid cyan;
      bottom: 0;
      background-image: url(../images/cf.png); } 
.container .wall:nth-child(3) {
      transform-origin: center left;
      transform: rotateY(90deg);
      width: 80vh;
      height: 100%;
      left: 0;
      border-right: 3vh solid cyan;
      background-image: url(../images/dm.png); }
    .container .wall:nth-child(4) {
      transform-origin: center right;
      transform: rotateY(-90deg);
      width: 80vh;
      height: 100%;
      right: 0;
      border-left: 3vh solid cyan;
      background-image: url(../images/dm.png); }

最后编辑于：2019.02.12 11:27:49