css實現(xiàn)簡單3D房間效果

最終效果圖

純3D效果實現(xiàn)上述效果典奉，總體思路就是旋轉容器，為容器貼紙妹孙。

這是一個簡單的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;
}

而后雹舀，繼續(xù)分析四個 div.wall屬性芦劣，我們需要將他們放在四個方向，當做整個空間的“墻面”说榆。

先分析“墻面”大小虚吟，上下墻面（左右墻面）寬高應該保持一致寸认。

上下墻面的寬應該和容器寬度一致，左右墻面的高和容器高度一致串慰，左右墻面的寬和上下墻面的高一致偏塞。因此，我們這樣設置

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

接著將一個wall元素放在上墻面邦鲫，上墻面必須和容器的y軸垂直灸叼，假設容器的高寬深為1000px, 1000px, 500px,那么上墻面應該是（x，1000px庆捺，z）這個平面古今。(在設計元素旋轉的時候一定要清楚為什么要這樣旋轉)。

默認的面是（x, y, 0)滔以。問題轉化為通過旋轉使得

兩個面的夾腳為90度（面面夾角計算公式）捉腥，因此旋轉角度為90度。

哪個屬性不發(fā)生變化醉者，就繞哪個軸進行旋轉但狭。

• 保證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); }