Unit.js 虚拟3D房屋单元

使用CSS3构建的三维房屋

css3, room

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1367
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function f(a, b) {
    return document.getElementsByClassName(a)[b]
}

function move(a) {
    document.getElementById('man').classList.add('blur');
    setTimeout(function() {
        document.getElementById('man').style.webkitTransform = "translateX(" + (400 - a.getAttribute('x') * 50) + "px) translateZ(" + (a.getAttribute('y') * 50 - 200) + "px) rotateY(-45deg) scaleX(1)";
        document.getElementById('man').classList.remove('blur');
    }, 300)
}

tile2();

s();

function d(a) {
    document.getElementById('dress').src = a.getAttribute('src');
    document.getElementsByClassName('popup')[1].classList.toggle('down')
}

编译

CSS

@charset "UTF-8";
@import "https://fonts.googleapis.com/css?family=Open+Sans";
.button {
    margin: 8px;
    font-family: 'Open Sans', sans-serif;
    cursor: pointer;
    transition: all 0.3s;
}
.button:focus {
    outline: 0;
}
.button_3d {
    padding: .9em 1.3em .9em;
    border: 0;
    box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.15);
    font-size: 1.2em;
    border-radius: 6px;
    color: #e6e6e6;
    background: #b4b4b4;
    transition: all 0.1s;
}
.button_3d:hover {
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.15);
}
.button_em {
    padding: .8em 1.3em .8em;
    border: 0;
    font-size: 1.2em;
    border-radius: 5px;
    color: #e6e6e6;
    background: #b4b4b4;
    box-shadow: inset 0 0 0 4.5px rgba(255, 255, 255, 0.65);
}
.button_em:hover {
    box-shadow: inset 0 0 0 4.5px rgba(255, 255, 255, 0.25);
}
.button_border {
    padding: .85em 1.3em .65em;
    font-size: 1.2em;
    background: none;
    border-width: 2.7px;
    border-style: solid;
    border-color: #a0a0a0;
    border-radius: 4px;
    color: #787878;
}
.button_shadow {
    padding: .85em 1.3em .65em;
    font-size: 1.2em;
    background: #fafafa;
    border: 0;
    box-shadow: 0 0 20px silver;
    color: #787878;
}
.button_normal {
    padding: .85em 1.3em .65em;
    font-size: 1.2em;
    background: silver;
    border: 0;
    color: white;
}
.button_normal:hover {
    background: #a7a7a7;
}
.button_normal[data-button=red]:hover {
    background: #eb2521;
}
.button_normal[data-button=blue]:hover {
    background: #20638f;
}
.button_normal[data-button=green]:hover {
    background: #25a25a;
}
.button_normal[data-button=purple]:hover {
    background: #9e3851;
}
.button_3d[data-button=red],
.button_em[data-button=red],
.button_normal[data-button=red] {
    background: #EF5350;
}
.button_3d[data-button=green],
.button_em[data-button=green],
.button_normal[data-button=green] {
    background: #2ecc71;
}
.button_3d[data-button=blue],
.button_em[data-button=blue],
.button_normal[data-button=blue] {
    background: #2980b9;
}
.button_3d[data-button=purple],
.button_em[data-button=purple],
.button_normal[data-button=purple] {
    background: #BF4A67;
}
.button_3d[data-button=orange],
.button_em[data-button=orange],
.button_normal[data-button=orange] {
    background: #EA5B0C;
}
.button_shadow:hover,
.button_border:hover {
    color: #fff !important;
    background: #a0a0a0;
}
.button_shadow[data-button=red],
.button_border[data-button=red] {
    border-color: #EF5350;
    color: #EF5350;
}
.button_shadow[data-button=blue],
.button_border[data-button=blue] {
    border-color: #2980b9;
    color: #2980b9;
}
.button_shadow[data-button=green],
.button_border[data-button=green] {
    border-color: #2ecc71;
    color: #2ecc71;
}
.button_shadow[data-button=purple],
.button_border[data-button=purple] {
    border-color: #BF4A67;
    color: #BF4A67;
}
.button_shadow[data-button=orange],
.button_border[data-button=orange] {
    border-color: #EA5B0C;
    color: #EA5B0C;
}
.button_shadow[data-button=red]:hover,
.button_border[data-button=red]:hover {
    background: #EF5350;
}
.button_shadow[data-button=blue]:hover,
.button_border[data-button=blue]:hover {
    background: #2980b9;
}
.button_shadow[data-button=green]:hover,
.button_border[data-button=green]:hover {
    background: #2ecc71;
}
.button_shadow[data-button=purple]:hover,
.button_border[data-button=purple]:hover {
    background: #BF4A67;
}
.button_shadow[data-button=orange]:hover,
.button_border[data-button=orange]:hover {
    background: #EA5B0C;
}
.button_arrow:hover:after {
    content: " 》";
    position: absolute;
    margin-left: 4px;
    opacity: 0.6;
}
.button_arrow:hover {
    padding-left: 1em;
    padding-right: 1.6em;
}
.button_disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.button_group {
    margin: 16px -2px 0;
}
/* UNIT.CSS */

.holder {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(-20deg) rotateY(45deg) scale(1);
    top: calc(50vh + 150px);
    left: calc(50vw - 175px);
    position: absolute;
    pointer-events: auto;
}
.h {
    transition: all 0.5s;
    -webkit-transform: scaleY(1) scaleZ(1) scaleX(1);
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    position: absolute;
    top: 0
}
.h.zoomin {
    -webkit-transform: scaleY(1.35) scaleZ(1.35) scaleX(1.35)
}
.holder div {
    position: absolute
}
.base {
    width: 500px;
    height: 500px;
    background: linear-gradient(to top, rgba(169, 186, 192, 1) 0%, rgba(89, 106, 114, 1) 100%);
    -webkit-transform: rotateX(90deg) translateZ(250px);
}
.ba {
    width: 500px;
    height: 20px;
    background: linear-gradient(to left, rgba(181, 189, 200, 1) 0%, rgba(130, 140, 149, 1) 36%, rgba(40, 52, 59, 1) 100%);
    -webkit-transform: rotateY(-90deg) translateZ(250px)
}
.bb {
    width: 500px;
    height: 20px;
    background: linear-gradient(to left, rgba(169, 186, 192, 1) 0%, rgba(89, 106, 114, 1) 100%);
    -webkit-transform: rotateY(180deg) translateZ(-250px)
}
.wa {
    width: 500px;
    height: 200px;
    background: rgba(129, 146, 154, 1);
    -webkit-transform: rotateY(-90deg) translateZ(-250px) translateY(-200px)
}
.wb {
    width: 500px;
    height: 200px;
    background: rgba(119, 136, 144, 1);
    -webkit-transform: rotateY(180deg) translateZ(250px) translateY(-200px)
}
.tile {
    width: 50px;
    height: 50px;
    background: purple;
    top: -27.5px
}
.tile2 {
    background: none;
    cursor: pointer
}
.tile2:hover {
    background: rgba(0, 0, 0, 0.4)
}
.wpaperl {
    width: 50px;
    height: 200px;
    background: purple;
    -webkit-transform: translateZ(-249px) translateY(-200px)
}
.wpaperr {
    width: 50px;
    height: 200px;
    background: purple;
    right: -524px
}
.window {
    background-size: cover;
    -webkit-transform: translateZ(-247.5px) translateY(-200px)
}
.wr {
    -webkit-transform: translateZ(-200px) translateY(-200px) rotateY(90deg);
    left: 448px!important
}
.frame {
    box-sizing: border-box;
    border: 3px solid rgba(0, 0, 0, 0.4)
}
.door {
    width: 100px;
    height: 140px;
    background: sienna;
    border-radius: 2px 2px 0 0;
    top: 60px;
    box-sizing: border-box;
    border: 5px solid rgba(70, 10, 10, 0.6);
    border-bottom: 0;
    cursor: pointer
}
.door:hover {
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4)
}
.dl {
    -webkit-transform: translateZ(-249px) translateY(-200px)
}
.dr {
    left: 448.5px
}
.door:after {
    content: "";
    width: 10px;
    height: 10px;
    background: rgba(70, 10, 10, 0.8);
    border-radius: 50%;
    position: absolute;
    left: 14px;
    top: 72px
}
.furn {
    position: absolute;
    bottom: 0px;
    outline: 1px solid transparent;
    pointer-events: none
}
.fo {
    width: 100px;
    height: 200px
}
.ft {
    width: 150px;
    height: 200px
}
#man {
    transition: opacity 0.15s;
    opacity: 1
}
#man.blur {
    opacity: 0
}
#man img {
    width: 100px;
    position: absolute
}

HTML

<div class='base'></div>
        <div class='ba'></div>
        
        <div class='bb'></div>
        
        <div class='wa'></div>
        
        <div class='wb'></div>
        
    </div>
</div>

使用CSS3构建的三维房屋

css3, room

编辑器支持Emmet

快捷键

使用CSS3构建的三维房屋

css3, room

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

Slick.js+Animate.css 带文本说明层的平滑图片轮播控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：