網頁3d模型展示，css3d模型做法,CSS3 3D房屋模型

CSS

語言：

CSSSCSS

確定

網頁3d模型展示，.container {

width: 250px;

height: 250px;

position: absolute;

top: 0;

css3盒子模型，bottom: 0;

left: 0;

right: 0;

margin: auto;

}

3d相冊css代碼？#cube {

width: 100%;

height: 100%;

position: absolute;

transform-style: preserve-3d;

我愛拼模型3D、}

#cube figure {

margin: 0;

width: 200px;

height: 200px;

3d房屋圖？display: block;

/* border: 2px solid black; */

position: absolute;

}

#cube .front {

css 盒子模型。/* background-color: rgba(248, 158, 66, 1); */

transform: rotateY(0deg) translateZ(100px);

}

#cube .back {

transform: rotateX(180deg) translateZ(100px);

css模型，background-color: #ea4229;

}

#cube .right {

transform: rotateY(90deg) translateZ(100px);

background-color: #f89e42;

模型、}

#cube .left {

/* background-color: rgba(234, 66, 41, 1); */

transform: rotateY(-90deg) translateZ(100px);

}

3D？#cube .top {

/* background-color: rgba(241, 125, 49, 1); */

transform: rotateX(90deg) translateZ(100px);

}

#cube .bottom {

3d模型網站哪個好，transform: rotateX(-90deg) translateZ(100px);

background-color: #c7c8ca;

}

#cube .back-internal-bottom {

margin: 50px 50px 50px 0px !important;

3d模型制作。width: 150px !important;

height: 100px !important;

transform: rotateX(180deg) translateZ(50px);

background-color: #96989c;

}

3d打印模型圖？#cube .back-internal-top {

margin: 0px 50px 50px 50px !important;

width: 100px !important;

height: 150px !important;

transform: rotateX(180deg) translateZ(50px);

網頁展示3d模型。background-color: #96989c;

}

#cube .right-internal {

margin: 0px 50px 50px 50px !important;

width: 100px !important;

3d免費模型庫、height: 150px !important;

transform: rotateY(90deg) translateZ(50px);

background-color: #c7c8ca;

}

#cube .bottom-internal {

房屋3d建模，margin: 50px 50px 50px 0px !important;

width: 150px !important;

height: 100px !important;

transform: rotateX(-90deg) translateZ(50px);

background-color: #c7c8ca;

3d房屋效果圖、}

#cube .front-internal-tunnel-bottom {

margin: 50px 50px 50px 0px !important;

width: 150px !important;

height: 100px !important;

3D建模。transform: rotateY(0) translateZ(50px);

background-color: #96989c;

}

#cube .front-internal-tunnel-top {

margin: 0px 0px 50px 50px !important;

width: 100px !important;

height: 150px !important;

transform: rotateY(0) translateZ(50px);

background-color: #96989c;

}

#cube .top-internal-tunnel {

margin: 50px 150px 50px 0px !important;

width: 50px !important;

height: 100px !important;

transform: rotateX(90deg) translateZ(50px);

background-color: #c7c8ca;

}

#cube .left-internal-tunnel {

margin: 0px 50px 150px 50px !important;

width: 100px !important;

height: 50px !important;

transform: rotateY(-90deg) translateZ(50px);

background-color: #c7c8ca;

}

#cube .right-internal-door {

margin: 100px 150px 0px 50px !important;

width: 50px !important;

height: 100px !important;

transform: rotateY(0deg) translateZ(50px);

background-color: #96989c;

}

#cube .left-internal-door {

margin: 100px 200px 0px 150px !important;

width: 50px !important;

height: 100px !important;

/*background-color: rgba(199, 200, 202, 1);*/

transform: rotateY(90deg) translateZ(50px);

background-color: #000;

}

#cube {

transform: translateZ(-100px);

}

.side-slice {

position: absolute;

}

.left .side-slice {

background-color: #ea4229;

}

.top .side-slice {

background-color: #f17d31;

}

.side-slice-left {

margin: 0 0 0 0;

height: 50px;

width: 200px;

}

.side-slice-top {

margin: 0 0 0 0;

height: 200px;

width: 50px;

}

.side-slice-right {

margin: 0 0 0 150px;

height: 200px;

width: 50px;

}

.side-slice-bottom {

margin: 150px 0 0 0;

height: 50px;

width: 200px;

}

.door-slice {

position: absolute;

}

.front .door-slice {

background-color: #f89e42;

}

.door-slice-left {

margin: 0 0 0 0;

height: 200px;

/* background-color: rgba(0, 0, 0, 1); */

width: 50px;

}

.door-slice-top {

margin: 0 0 0 0;

height: 100px;

/* background-color: rgba(255, 0, 0, 1); */

width: 200px;

}

.door-slice-right {

margin: 0 0 0 100px;

height: 200px;

/* background-color: rgba(0, 255, 0, 1); */

width: 100px;

}

.door-slice-bottom {

margin: 150px 0 0 0;

height: 50px;

/* background-color: rgba(0, 0, 255, 1); */

width: 200px;

}

.door-bottom {

margin: 0 150px 0 50px;

height: 100px;

width: 50px;

background-color: #96989c;

}

@keyframes spin {

from {

transform: rotateX(-45deg) rotateY(45deg);

}

to {

transform: rotateX(-45deg) rotateY(405deg);

}

}

#cube {

animation: spin 5s infinite linear;

}