如何在css中的房間視圖中構建一個3d？

Question

在css中動畫3D對象上已經有了一些不錯的貼子。但是我想知道是否可以從對象內部的角度來這樣做。

這將是很好的建立，例如，一個純粹的CSS遊戲或街景像應用程序。

Answer 1

在David DeSandro的幫助下進行了一些調整後，這個CSS做了伎倆。

#container { 
 
    top: 100px; 
 
    width: 1200px; 
 
    height: 600px; 
 
    position: relative; 
 
    perspective: 600px; 
 
    /* half the width */ 
 
    border: 2px solid green; 
 
} 
 
#room { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    transform-origin: 50% 80% 600px; 
 
    transform-style: preserve-3d; 
 
} 
 
#room figure { 
 
    margin: 0; 
 
    display: block; 
 
    position: absolute; 
 
    border: 2px solid green; 
 
    font: 400px"calibri"; 
 
    text-align: center; 
 
} 
 
#room .n, 
 
.e, 
 
.s, 
 
.w { 
 
    width: 1196px; 
 
    height: 596px; 
 
} 
 
#room .n { 
 
    background-color: rgba(255, 0, 0, 0.3); 
 
} 
 
#room .e { 
 
    background-color: rgba(255, 255, 0, 0.3); 
 
} 
 
#room .s { 
 
    background-color: rgba(0, 255, 255, 0.3); 
 
} 
 
#room .w { 
 
    background-color: rgba(0, 0, 255, 0.3); 
 
} 
 
#room .t, 
 
.b { 
 
    width: 1196px; 
 
    height: 1196px; 
 
    top: -300px; 
 
    background-color: rgba(200, 200, 200, 0.5); 
 
} 
 
/* transform & inverse */ 
 

 
#room .n { 
 
    transform: rotateY(0deg) translateZ(0px); 
 
} 
 
#room .e { 
 
    transform: rotateY(-90deg) translateZ(-600px) translateX(600px); 
 
} 
 
#room .s { 
 
    transform: rotateY(180deg) translateZ(-1200px); 
 
} 
 
#room .w { 
 
    transform: rotateY(90deg) translateZ(-600px) translateX(-600px); 
 
} 
 
#room .t { 
 
    transform: rotateX(90deg) translateZ(300px) translateY(600px); 
 
} 
 
#room .b { 
 
    transform: rotateX(90deg) translateZ(-300px) translateY(600px); 
 
} 
 
#room .show-n { 
 
    transform: translateZ(0px) rotateY(0deg); 
 
} 
 
#room .show-e { 
 
    transform: translateX(-600px) translateZ(600px) rotateY(90deg); 
 
} 
 
#room .show-s { 
 
    transform: translateZ(1200px) rotateY(180deg); 
 
} 
 
#room .show-w { 
 
    transform: translateX(600px) translateZ(600px) rotateY(-90deg); 
 
} 
 
#room .show-t { 
 
    transform: translateY(-600px) translateZ(-300px) rotateX(-90deg); 
 
} 
 
#room .show-b { 
 
    transform: translateY(-600px) translateZ(300px) rotateX(90deg); 
 
} 
 
#room { 
 
    animation: 5s hspinner; 
 
} 
 
@keyframes hspinner { 
 
    from { 
 
    transform: rotateY(0deg); 
 
    } 
 
    to { 
 
    transform: rotateY(-360deg); 
 
    } 
 
}

<section id="container"> 
 
    <div id="room"> 
 
    <figure class="n">N</figure> 
 
    <figure class="e">O</figure> 
 
    <figure class="s">Z</figure> 
 
    <figure class="w">W</figure> 
 
    <figure class="t">T</figure> 
 
    <figure class="b">B</figure> 
 
    </div> 
 
</section>

享受。