body {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d
}
* {
    -webkit-user-select: none
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate3d(1, 0, 0, 60deg) rotate3d(0, 0, 1, 20deg)
    }

    40% {
        -webkit-transform: rotate3d(1, 0, 0, 88deg) rotate3d(0, 0, 1, 120deg)
    }

    70% {
        -webkit-transform: rotate3d(1, 0, 0, 88deg) rotate3d(0, 0, 1, 260deg)
    }

    90% {
        -webkit-transform: rotate3d(1, 0, 0, 70deg) rotate3d(0, 0, 1, 260deg)
    }

    100% {
        -webkit-transform: rotate3d(1, 0, 0, 60deg) rotate3d(0, 0, 1, 380deg)
    }
}

.world {
    float: left;
    zoom: 1;
    font-size: 0;
    position: absolute;
    left: 20%;
    top: 0%;
    max-width: 380px;
    width: 100%;
    height: 300px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotate3d(1, 0, 0, 60deg) rotate3d(0, 0, 1, 0deg);
    -webkit-animation: rotate 10s ease-in-out infinite;           
}  

.ground {
    font-size: 0;
    position: absolute;
    display: block;
    top: -10%;
    left: -8%;
    width: 132%;
    height: 130%;
    border: 5px dotted #ccc;
    overflow: visible;
    -webkit-transform: translate3d(0, 0, -1px);
    -webkit-transform-style: preserve-3d;
}

.building {
    font-size: 0;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    background: #262533;
    width: 50px;
    height: 50px;
    cursor: move;
    overflow: visible;
    -webkit-transition: all 0.5s ease-out;
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    -webkit-transform-style: preserve-3d;
}

.block-1 {
    top: 0;
    left: 60%;
    -webkit-transform: scaleZ(3.5);
}

.block-2 {
    top: 0;
    left: 30%;
    -webkit-transform: scaleZ(3.9);
}

.block-3 {
    top: 20%;
    left: 10%;
    -webkit-transform: scaleZ(3.2);
}

.block-4 {
    top: 20%;
    left: 30%;
    -webkit-transform: scaleZ(4.8);
}

.block-5 {
    top: 20%;
    left: 50%;
    -webkit-transform: scaleZ(3.8);
}

.block-6 {
    top: 60%;
    left: 70%;
    -webkit-transform: scaleZ(4.8);
}

.block-7 {
    top: 60%;
    left: 20%;
    -webkit-transform: scaleZ(3.5);
}

.block-8 {
    top: 80%;
    left: 60%;
    -webkit-transform: scaleZ(3.8);
}

.block-9 {
    top: 80%;
    left: 0;
    -webkit-transform: scaleZ(4.9);
}

.block-10 {
    top: 80%;
    left: 40%;
    -webkit-transform: scaleZ(5.9);
}

.block-11 {
    top: 80%;
    left: 20%;
    -webkit-transform: scaleZ(4.9);
}

.building:hover {
    -webkit-transform: rotate3d(0, 0, 1, 900deg) scale3d(1, 1, 4);
    background: #0ae;
}

.building:hover>li {
    background: #0ae;
    opacity: .5;
}

.building:active {
    -webkit-transform: translateZ(50px) scale3d(1, 1, 4);
    background: #09c;
}

.building:active>li {
    background: #09c;
    opacity: .75;
}

.building>li {
    font-size: 0;
    display: inline-block;
    position: absolute;
    background: #fff;
    opacity: 0.9;
    border: 1px solid #fff;
    -webkit-transition: all 0.3s ease-out;
}

.building .top {
    background: rgba(255, 255, 255, 1);
    width: 50px;
    height: 50px;
    -webkit-transform: translate3d(0, 0, 50px);
}

.building .west {
    /* background: #fe0000; */
    /* background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px); */
    background-image: url(../images/dot2.png);
    opacity: 0.8;
    width: 50px;
    height: 50px;
    -webkit-transform-origin: 0 0;
    -webkit-transform: rotate3d(0, 1, 0, -90deg);
}

.building .east {
    /* background: #fe0000; */
    background-image: url(../images/dot2.png);
    opacity: 0.8;
    width: 50px;
    height: 50px;
    -webkit-transform-origin: 100% 0;
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
}

.building .north {
    /* background: #fff; */
    background-image: url(../images/dot2.png);
    opacity: 0.8;
    /* opacity: 0.3; */
    width: 50px;
    height: 50px;
    -webkit-transform-origin: 0 0;
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
}

.building .south {
    /* background: #fe0000; */
    background-image: url(../images/dot2.png);
    width: 50px;
    height: 50px;
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: rotate3d(1, 0, 0, -90deg);
}

.road {
    font-size: 0;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    background: #626367;
    width: 350px;
    height: 30px;
    overflow: visible;
    -webkit-transition: all 0.5s ease-out;
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    -webkit-transform-style: preserve-3d;
}

.road-1 {
    top: 60%;
    left: 40%;
    -webkit-transform: translateZ(.9px) rotate3d(0, 0, 1, 90deg);
}

.road-2 {
    top: 40%;
    left: 20%;
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
}

.road-3 {
    top: 100%;
    left: 0;
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
}

.car {
    font-size: 0;
    position: absolute;
    display: block;
    cursor: move;
    top: 60%;
    left: 50%;
    background: #666;
    width: 5px;
    height: 10px;
    overflow: visible;
    -webkit-transition: all 0.5s ease-out;
    -webkit-transform: translateZ(2px) rotate3d(0, 0, 1, 90deg);
    -webkit-transform-style: preserve-3d;
}


.car>li {
    font-size: 0;
    display: inline-block;
    position: absolute;
    background: #fc0;
    -webkit-transition: all 0.3s ease-out;
}

.car .roof {
    background: #777;
    width: 5px;
    height: 10px;
    -webkit-transform: translate3d(0, 0, 5px);
    -moz-transform: translate3d(0, 0, 5px);
}

.car .door-left {
    background: #555;
    width: 5px;
    height: 10px;
    -webkit-transform-origin: 0 0;
    -webkit-transform: rotate3d(0, 1, 0, -90deg);
    -moz-transform-origin: 0 0;
    -moz-transform: rotate3d(0, 1, 0, -90deg);
}

.car .door-right {
    background: #777;
    width: 5px;
    height: 10px;
    -webkit-transform-origin: 100% 0;
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
    -moz-transform-origin: 100% 0;
    -moz-transform: rotate3d(0, 1, 0, 90deg);
}

.car .front {
    background: #666;
    width: 5px;
    height: 5px;
    -webkit-transform-origin: 0 0;
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
    -moz-transform-origin: 0 0;
    -moz-transform: rotate3d(1, 0, 0, 90deg);
}

.car .trunk {
    background: #444;
    width: 5px;
    height: 5px;
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: translateY(5px) rotate3d(1, 0, 0, -90deg);
    -moz-transform-origin: 100% 100%;
    -moz-transform: translateY(5px) rotate3d(1, 0, 0, -90deg);
}

.car-1 {
    top: 40%;
    left: 60%;
}

.car-2 {
    top: 40%;
    left: 80%;
}

.car-3 {
    top: 60%;
    left: 95%;
    -webkit-transform: translateZ(2px) rotate3d(0, 0, 1, 0deg);
    -moz-transform: translateZ(2px) rotate3d(0, 0, 1, 0deg);
}

@media (max-width:768px) {
    .world {
        max-width: 275px;
    }
    
}

@media (max-width:425px) {
    .world {
         left: 20%;
    /* top: 0%; */
    width: 170px;
    height: 206px;
    margin-top: 0%;
    margin-bottom: 0%;
    }
   

    .block-1 {
        left: 0%;
    }

    .road {
        width: 200px;
    }
}