body {
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 1000;
}

h1, h2, h3, h4, h5, h6, p, a, input, label, button, textarea, ul, li, label {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

* {
    -webkit-user-select: none;
}

#logo {
  text-align: center;
  margin: 20px 0 10px;
}

#nav {
  text-align: center;
}

#nav ul li {
  display: inline-block;
}

#nav ul li a {
  font: bold 18px/24px '微软雅黑', 'Arial';
  color: #333;
  text-decoration: none;
  padding: 10px 30px;
}

#nav ul li a:hover{
  color: #cccc00;
}



@-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 {
    font-size: 0;
    position: absolute;
    top: 25%;
    left: 40%;
    float: left;
    zoom: 1;
    width: 300px;
    height: 300px;
    margin-top: 150px;
    -webkit-transform: rotate3d(1,0,0,60deg) rotate3d(0,0,1,0deg);
    -webkit-animation: rotate 10s ease-in-out infinite;

    -webkit-transform-style: preserve-3d;
}


.ground {
    font-size: 0;
    position: absolute;
    top: -25%;
    left: -25%;
    display: block;
    overflow: visible;
    width: 150%;
    height: 150%;
    -webkit-transform: translate3d(0,0,-1px);
    border: 5px dotted #ccc;

    -webkit-transform-style: preserve-3d;
}

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

    -webkit-transform-style: preserve-3d;
}
.block-1 {
    top: 0;
    left: 60%;
    -webkit-transform: scaleZ(1.5);
}
.block-2 {
    top: 0;
    left: 30%;
    -webkit-transform: scaleZ(2.5);
}
.block-3 {
    top: 20%;
    left: 10%;
    -webkit-transform: scaleZ(1.2);
}
.block-4 {
    top: 20%;
    left: 30%;
    -webkit-transform: scaleZ(1.8);
}
.block-5 {
    top: 20%;
    left: 50%;
    -webkit-transform: scaleZ(1.8);
}
.block-6 {
    top: 60%;
    left: 70%;
    -webkit-transform: scaleZ(1.8);
}
.block-7 {
    top: 60%;
    left: 20%;
    -webkit-transform: scaleZ(1.5);
}
.block-8 {
    top: 80%;
    left: 60%;
    -webkit-transform: scaleZ(2.8);
}
.block-9 {
    top: 80%;
    left: 0;
    -webkit-transform: scaleZ(2.9);
}
.block-10 {
    top: 80%;
    left: 40%;
    -webkit-transform: scaleZ(3.9);
}
.block-11 {
    top: 80%;
    left: 20%;
    -webkit-transform: scaleZ(2.9);
}

.building:hover {
    -webkit-transform: rotate3d(0,0,1,900deg) scale3d(1, 1, 4);
    background: #2bf2e2;
}
.building:hover > li {
    opacity: .5;
    background: #2bf2e2;
}
.building:active {
    -webkit-transform: translateZ(50px) scale3d(1, 1, 4);
    background: #2bf2e2;
}
.building:active > li {
    opacity: .75;
    background: #2bf2e2;
}

.building > li {
    font-size: 0;
    position: absolute;
    display: inline-block;
    -webkit-transition: all .3s ease-out;
    background: #fc0;
}
.building .top {
    width: 50px;
    height: 50px;
    -webkit-transform: translate3d(0,0,50px);
    background: rgba(255,212,38,1);
}
.building .west {
    width: 50px;
    height: 50px;
    -webkit-transform: rotate3d(0,1,0,-90deg);
    -webkit-transform-origin: 0 0;
    background: rgba(242,194,0,1);
}
.building .east {
    width: 50px;
    height: 50px;
    -webkit-transform: rotate3d(0,1,0,90deg);
    -webkit-transform-origin: 100% 0;
    background: rgba(217,174,0,1);
}
.building .north {
    width: 50px;
    height: 50px;
    -webkit-transform: rotate3d(1,0,0,90deg);
    -webkit-transform-origin: 0 0;
    background: rgba(242,194,0,1);
}
.building .south {
    width: 50px;
    height: 50px;
    -webkit-transform: rotate3d(1,0,0,-90deg);
    -webkit-transform-origin: 100% 100%;
    background: rgba(255,204,0,1);
}

.road {
    font-size: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    overflow: visible;
    width: 350px;
    height: 30px;
    -webkit-transition: all .5s ease-out;
    -webkit-transform: rotate3d(0,0,1,0deg);
    background: #2bf2e2;

    -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;
    top: 60%;
    left: 50%;
    display: block;
    overflow: visible;
    width: 5px;
    height: 10px;
    -webkit-transition: all .5s ease-out;
    -webkit-transform: translateZ(2px) rotate3d(0,0,1,90deg);
    background: #666;

    //cursor: move;
    -webkit-transform-style: preserve-3d;
}
/*
.car:hover
{
  -webkit-transform: rotate3d(0,0,1,900deg) scale3d(4, 4, 4);
  background:#fff;
}
  .car:hover>li
  {
    background:#fff;
    opacity:.5;
  }
.car:active
{
  -webkit-transform: translateZ(50px) scale3d(4, 4, 4);
}
  .car:active>li
  {
    background:#0ae;
  }
*/
.car > li {
    font-size: 0;
    position: absolute;
    display: inline-block;
    -webkit-transition: all .3s ease-out;
    background: #fc0;
}
.car .roof {
    width: 5px;
    height: 10px;
    -webkit-transform: translate3d(0,0,5px);
    background: #777;
}
.car .door-left {
    width: 5px;
    height: 10px;
    -webkit-transform: rotate3d(0,1,0,-90deg);
    -webkit-transform-origin: 0 0;
    background: #555;
}
.car .door-right {
    width: 5px;
    height: 10px;
    -webkit-transform: rotate3d(0,1,0,90deg);
    -webkit-transform-origin: 100% 0;
    background: #777;
}
.car .front {
    width: 5px;
    height: 5px;
    -webkit-transform: rotate3d(1,0,0,90deg);
    -webkit-transform-origin: 0 0;
    background: #666;
}
.car .trunk {
    width: 5px;
    height: 5px;
    -webkit-transform: translateY(5px) rotate3d(1,0,0,-90deg);
    -webkit-transform-origin: 100% 100%;
    background: #444;
}
.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);
}