3D city - Liveweave

<html>
<head>
  <title>CSS3 3D transform demo (no JavaScript) - Liveweave</title>
  <meta name="authors" content="mutukrish" />
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="world" class="world">

<h1 class="ground">ground</h1>

<ul class="building block-1">Building
    <li class="top">roof</li>
    <li class="west">west wall</li>
    <li class="north">north wall</li>
    <li class="east">east wall</li>
    <li class="south">south wall</li>
  </ul>

<ul class="building block-2">Building
    <li class="top">roof</li>
    <li class="west">west wall</li>
    <li class="north">north wall</li>
    <li class="east">east wall</li>
    <li class="south">south wall</li>
  </ul>

<ul class="building block-3">Building
    <li class="top">roof</li>
    <li class="west">west wall</li>
    <li class="north">north wall</li>
    <li class="east">east wall</li>
    <li class="south">south wall</li>
  </ul>

<ul class="building block-4">Building
    <li class="top">roof</li>
    <li class="west">west wall</li>
    <li class="north">north wall</li>
    <li class="east">east wall</li>
    <li class="south">south wall</li>
  </ul>

<ul class="building block-5">Building
    <li class="top">roof</li>
    <li class="west">west wall</li>
    <li class="north">north wall</li>
    <li class="east">east wall</li>
    <li class="south">south wall</li>
  </ul>

<ul class="building block-6">Building
    <li class="top">roof</li>
    <li class="west">west wall</li>
    <li class="north">north wall</li>
    <li class="east">east wall</li>
    <li class="south">south wall</li>
  </ul>

<ul class="building block-7">Building
    <li class="top">roof</li>
    <li class="west">west wall</li>
    <li class="north">north wall</li>
    <li class="east">east wall</li>
    <li class="south">south wall</li>
  </ul>

<ul class="building block-8">Building
    <li class="top">roof</li>
    <li class="west">west wall</li>
    <li class="north">north wall</li>
    <li class="east">east wall</li>
    <li class="south">south wall</li>
  </ul>

<ul class="building block-9">Building
    <li class="top">roof</li>
    <li class="west">west wall</li>
    <li class="north">north wall</li>
    <li class="east">east wall</li>
    <li class="south">south wall</li>
  </ul>

<ul class="building block-10">Building
    <li class="top">roof</li>
    <li class="west">west wall</li>
    <li class="north">north wall</li>
    <li class="east">east wall</li>
    <li class="south">south wall</li>
  </ul>

<ul class="building block-11">Building
    <li class="top">roof</li>
    <li class="west">west wall</li>
    <li class="north">north wall</li>
    <li class="east">east wall</li>
    <li class="south">south wall</li>
  </ul>

<ul class="car car-1">Car
    <li class="roof">roof</li>
    <li class="door-left">door left</li>
    <li class="front">front</li>
    <li class="door-right">door right</li>
    <li class="trunk">trunk</li>
  </ul>

<ul class="car car-2">Car
    <li class="roof">roof</li>
    <li class="door-left">door left</li>
    <li class="front">front</li>
    <li class="door-right">door right</li>
    <li class="trunk">trunk</li>
  </ul>

<ul class="car car-3">Car
    <li class="roof">roof</li>
    <li class="door-left">door left</li>
    <li class="front">front</li>
    <li class="door-right">door right</li>
    <li class="trunk">trunk</li>
  </ul>

</div>
</body>
</html>

{
font-size:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
font-size:13px;
line-height:1.231;
font-family:sans-serif;
}
a:focus, a:hover, a:active, a:visited{
color:#06c;
outline:0;
}
b, strong{
font-weight:bold;
}
blockquote{
margin:1em 40px;
}
dfn{
font-style:italic;
}
hr{
display:block;
height:1px;
border:0;
border-top:1px solid #ccc;
margin:1em 0;
padding:0;
}
ins{
background:#ff9;
color:#000;
text-decoration:none;
}
mark{
background:#ff0;
color:#000;
font-style:italic;
font-weight:bold;
}
pre, code, kbd, samp{
font-family:monospace, monospace;
_font-family:'courier new', monospace;
font-size:1em;
}
pre{
white-space:pre;
white-space:pre-6 wrap;
word-wrap:break-word;
}
q{
quotes:none;
}
q:before, q:after{
content:"";
content:none;
}
small{
font-size:85%;
}
sub, sup{
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline;
}
sup{
top:-0.5em;
}
sub{
bottom:-0.25em;
}
h1, h2, h3, h4, h5, h6, a, p{
padding:0;
margin:0;
}
ul, ol{
margin:0;
padding:0;
}
dd{
margin:0 0 0 40px;
}
nav ul, nav ol{
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
img{
border:0;
-ms-interpolation-mode:bicubic;
vertical-align:middle;
}
form{
margin:0;
padding:0;
}
fieldset{
border:0;
margin:0;
padding:0;
}
label{
cursor:pointer;
}
legend{
border:0;
*margin-left:-7px;
padding:0;
}
button, input, select, textarea{
outline:0;
border:0;
font-size:100%;
padding:0;
margin:0;
vertical-align:baseline;
*vertical-align:middle;
}
button, input{
line-height:normal;
*overflow:visible;
}
table button, table input{
*overflow:auto;
}
button, input[type="button"], input[type="reset"], input[type="submit"]{
cursor:pointer;
-webkit-appearance:button;
}
some_nowhitespace{
nowhitespace:afterproperty;
}
/* iOs */

input[type="checkbox"], input[type="radio"]{
box-sizing:border-box;
cursor:pointer;
}
input[type="search"]{
-webkit-appearance:textfield;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
}
input[type="search"]::-webkit-search-decoration{
-webkit-appearance:none;
}
button::-moz-focus-inner, input::-moz-focus-inner{
border:0;
padding:0;
}
textarea{
overflow:auto;
vertical-align:top;
resize:vertical;
}
select{
font-size:14px;
}
table{
border-collapse:collapse;
border-spacing:0;
}
td{
vertical-align:top;
}
html{
font-family:Arial, Helvetica, sans-serif;
font-size:0;
color:#222;
background:#ececec;
height:100%;
}
body{
margin:0;
padding:0;
height:100%;
overflow:hidden;
}
h1{
font-size:20px;
}
h2{
font-size:15px;
}
h3{
font-size:14px;
}
h4{
font-size:13px;
}
h5{
font-size:12px;
}
h6{
font-size:12px;
}
a{
font-size:12px;
}
p, input, label, button, textarea, li{
font-size:12px;
color:#444;
}
/* ===[ No floats please ]=== */

h1, h2, h3, h4, h5, h6, p, a, input, label, button, textarea, ul, li, label{
position:relative;
vertical-align:top;
display:inline-block;
}
body{
/*transform-style*/
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        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) }
}
@-moz-keyframes rotate{
0% { -moz-transform: rotate3d(1,0,0,60deg) rotate3d(0,0,1,20deg) }

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

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

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

100% { -moz-transform: rotate3d(1,0,0,60deg) rotate3d(0,0,1,380deg) }
}
.world{
float:left;
zoom:1;
font-size:0;
position:absolute;
left:30%;
top:15%;
width:350px;
height:350px;
/*transform-style*/
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
/*transform*/
-webkit-transform:rotate3d(1,0,0,60deg) rotate3d(0,0,1,0deg);
   -moz-transform:rotate3d(1,0,0,60deg) rotate3d(0,0,1,0deg);
    -ms-transform:rotate3d(1,0,0,60deg) rotate3d(0,0,1,0deg);
     -o-transform:rotate3d(1,0,0,60deg) rotate3d(0,0,1,0deg);
        transform:rotate3d(1,0,0,60deg) rotate3d(0,0,1,0deg);
/*animation*/
-webkit-animation:rotate 10s ease-in-out infinite;
   -moz-animation:rotate 10s ease-in-out infinite;
    -ms-animation:rotate 10s ease-in-out infinite;
     -o-animation:rotate 10s ease-in-out infinite;
        animation:rotate 10s ease-in-out infinite;
}
.world:hover{
}
.ground{
font-size:0;
position:absolute;
display:block;
top:-25%;
left:-25%;
width:150%;
height:150%;
border:5px dotted #ccc;
overflow:visible;
/*transform*/
-webkit-transform:translate3d(0,0,-1px);
   -moz-transform:translate3d(0,0,-1px);
    -ms-transform:translate3d(0,0,-1px);
     -o-transform:translate3d(0,0,-1px);
        transform:translate3d(0,0,-1px);
/*transform-style*/
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
}
.building{
font-size:0;
position:absolute;
display:block;
top:50%;
left:50%;
background:#fc0;
width:50px;
height:50px;
cursor:move;
overflow:visible;
/*transition*/
-webkit-transition:all 0.5s ease-out;
   -moz-transition:all 0.5s ease-out;
     -o-transition:all 0.5s ease-out;
        transition:all 0.5s ease-out;
/*transform*/
-webkit-transform:rotate3d(0,0,1,0deg);
   -moz-transform:rotate3d(0,0,1,0deg);
    -ms-transform:rotate3d(0,0,1,0deg);
     -o-transform:rotate3d(0,0,1,0deg);
        transform:rotate3d(0,0,1,0deg);
/*transform-style*/
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
}
.block-1{
top:0;
left:60%;
/*transform*/
-webkit-transform:scaleZ(1.5);
   -moz-transform:scaleZ(1.5);
    -ms-transform:scaleZ(1.5);
     -o-transform:scaleZ(1.5);
        transform:scaleZ(1.5);
}
.block-2{
top:0;
left:30%;
/*transform*/
-webkit-transform:scaleZ(2.5);
   -moz-transform:scaleZ(2.5);
    -ms-transform:scaleZ(2.5);
     -o-transform:scaleZ(2.5);
        transform:scaleZ(2.5);
}
.block-3{
top:20%;
left:10%;
/*transform*/
-webkit-transform:scaleZ(1.2);
   -moz-transform:scaleZ(1.2);
    -ms-transform:scaleZ(1.2);
     -o-transform:scaleZ(1.2);
        transform:scaleZ(1.2);
}
.block-4{
top:20%;
left:30%;
/*transform*/
-webkit-transform:scaleZ(1.8);
   -moz-transform:scaleZ(1.8);
    -ms-transform:scaleZ(1.8);
     -o-transform:scaleZ(1.8);
        transform:scaleZ(1.8);
}
.block-5{
top:20%;
left:50%;
/*transform*/
-webkit-transform:scaleZ(1.8);
   -moz-transform:scaleZ(1.8);
    -ms-transform:scaleZ(1.8);
     -o-transform:scaleZ(1.8);
        transform:scaleZ(1.8);
}
.block-6{
top:60%;
left:70%;
/*transform*/
-webkit-transform:scaleZ(1.8);
   -moz-transform:scaleZ(1.8);
    -ms-transform:scaleZ(1.8);
     -o-transform:scaleZ(1.8);
        transform:scaleZ(1.8);
}
.block-7{
top:60%;
left:20%;
/*transform*/
-webkit-transform:scaleZ(1.5);
   -moz-transform:scaleZ(1.5);
    -ms-transform:scaleZ(1.5);
     -o-transform:scaleZ(1.5);
        transform:scaleZ(1.5);
}
.block-8{
top:80%;
left:60%;
/*transform*/
-webkit-transform:scaleZ(2.8);
   -moz-transform:scaleZ(2.8);
    -ms-transform:scaleZ(2.8);
     -o-transform:scaleZ(2.8);
        transform:scaleZ(2.8);
}
.block-9{
top:80%;
left:0;
/*transform*/
-webkit-transform:scaleZ(2.9);
   -moz-transform:scaleZ(2.9);
    -ms-transform:scaleZ(2.9);
     -o-transform:scaleZ(2.9);
        transform:scaleZ(2.9);
}
.block-10{
top:80%;
left:40%;
/*transform*/
-webkit-transform:scaleZ(3.9);
   -moz-transform:scaleZ(3.9);
    -ms-transform:scaleZ(3.9);
     -o-transform:scaleZ(3.9);
        transform:scaleZ(3.9);
}
.block-11{
top:80%;
left:20%;
/*transform*/
-webkit-transform:scaleZ(2.9);
   -moz-transform:scaleZ(2.9);
    -ms-transform:scaleZ(2.9);
     -o-transform:scaleZ(2.9);
        transform:scaleZ(2.9);
}
.building:hover{
/*transform*/
-webkit-transform:rotate3d(0,0,1,900deg) scale3d(1, 1, 4);
   -moz-transform:rotate3d(0,0,1,900deg) scale3d(1, 1, 4);
    -ms-transform:rotate3d(0,0,1,900deg) scale3d(1, 1, 4);
     -o-transform:rotate3d(0,0,1,900deg) scale3d(1, 1, 4);
        transform:rotate3d(0,0,1,900deg) scale3d(1, 1, 4);
background:#0ae;
}
.building:hover>li{
background:#0ae;
opacity:.5;
}
.building:active{
/*transform*/
-webkit-transform:translateZ(50px) scale3d(1, 1, 4);
   -moz-transform:translateZ(50px) scale3d(1, 1, 4);
    -ms-transform:translateZ(50px) scale3d(1, 1, 4);
     -o-transform:translateZ(50px) scale3d(1, 1, 4);
        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:#fc0;
/*transition*/
-webkit-transition:all 0.3s ease-out;
   -moz-transition:all 0.3s ease-out;
     -o-transition:all 0.3s ease-out;
        transition:all 0.3s ease-out;
}
.building .top{
background:rgba(255,212,38,1);
width:50px;
height:50px;
/*transform*/
-webkit-transform:translate3d(0,0,50px);
   -moz-transform:translate3d(0,0,50px);
    -ms-transform:translate3d(0,0,50px);
     -o-transform:translate3d(0,0,50px);
        transform:translate3d(0,0,50px);
}
.building .west{
background:rgba(242,194,0,1);
width:50px;
height:50px;
/*transform-origin*/
-webkit-transform-origin:0 0;
   -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
     -o-transform-origin:0 0;
        transform-origin:0 0;
/*transform*/
-webkit-transform:rotate3d(0,1,0,-90deg);
   -moz-transform:rotate3d(0,1,0,-90deg);
    -ms-transform:rotate3d(0,1,0,-90deg);
     -o-transform:rotate3d(0,1,0,-90deg);
        transform:rotate3d(0,1,0,-90deg);
}
.building .east{
background:rgba(217,174,0,1);
width:50px;
height:50px;
/*transform-origin*/
-webkit-transform-origin:100% 0;
   -moz-transform-origin:100% 0;
    -ms-transform-origin:100% 0;
     -o-transform-origin:100% 0;
        transform-origin:100% 0;
/*transform*/
-webkit-transform:rotate3d(0,1,0,90deg);
   -moz-transform:rotate3d(0,1,0,90deg);
    -ms-transform:rotate3d(0,1,0,90deg);
     -o-transform:rotate3d(0,1,0,90deg);
        transform:rotate3d(0,1,0,90deg);
}
.building .north{
background:rgba(242,194,0,1);
width:50px;
height:50px;
/*transform-origin*/
-webkit-transform-origin:0 0;
   -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
     -o-transform-origin:0 0;
        transform-origin:0 0;
/*transform*/
-webkit-transform:rotate3d(1,0,0,90deg);
   -moz-transform:rotate3d(1,0,0,90deg);
    -ms-transform:rotate3d(1,0,0,90deg);
     -o-transform:rotate3d(1,0,0,90deg);
        transform:rotate3d(1,0,0,90deg);
}
.building .south{
background:rgba(255,204,0,1);
width:50px;
height:50px;
/*transform-origin*/
-webkit-transform-origin:100% 100%;
   -moz-transform-origin:100% 100%;
    -ms-transform-origin:100% 100%;
     -o-transform-origin:100% 100%;
        transform-origin:100% 100%;
/*transform*/
-webkit-transform:rotate3d(1,0,0,-90deg);
   -moz-transform:rotate3d(1,0,0,-90deg);
    -ms-transform:rotate3d(1,0,0,-90deg);
     -o-transform:rotate3d(1,0,0,-90deg);
        transform:rotate3d(1,0,0,-90deg);
}
.road{
font-size:0;
position:absolute;
display:block;
top:50%;
left:50%;
background:#ccc;
width:350px;
height:30px;
overflow:visible;
/*transition*/
-webkit-transition:all 0.5s ease-out;
   -moz-transition:all 0.5s ease-out;
     -o-transition:all 0.5s ease-out;
        transition:all 0.5s ease-out;
/*transform*/
-webkit-transform:rotate3d(0,0,1,0deg);
   -moz-transform:rotate3d(0,0,1,0deg);
    -ms-transform:rotate3d(0,0,1,0deg);
     -o-transform:rotate3d(0,0,1,0deg);
        transform:rotate3d(0,0,1,0deg);
/*transform-style*/
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
}
.road-1{
top:60%;
left:40%;
/*transform*/
-webkit-transform:translateZ(.9px) rotate3d(0,0,1,90deg);
   -moz-transform:translateZ(.9px) rotate3d(0,0,1,90deg);
    -ms-transform:translateZ(.9px) rotate3d(0,0,1,90deg);
     -o-transform:translateZ(.9px) rotate3d(0,0,1,90deg);
        transform:translateZ(.9px) rotate3d(0,0,1,90deg);
}
.road-2{
top:40%;
left:20%;
/*transform*/
-webkit-transform:rotate3d(0,0,1,180deg);
   -moz-transform:rotate3d(0,0,1,180deg);
    -ms-transform:rotate3d(0,0,1,180deg);
     -o-transform:rotate3d(0,0,1,180deg);
        transform:rotate3d(0,0,1,180deg);
}
.road-3{
top:100%;
left:0;
/*transform*/
-webkit-transform:rotate3d(0,0,1,180deg);
   -moz-transform:rotate3d(0,0,1,180deg);
    -ms-transform:rotate3d(0,0,1,180deg);
     -o-transform:rotate3d(0,0,1,180deg);
        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;
/*transition*/
-webkit-transition:all 0.5s ease-out;
   -moz-transition:all 0.5s ease-out;
     -o-transition:all 0.5s ease-out;
        transition:all 0.5s ease-out;
/*transform*/
-webkit-transform:translateZ(2px) rotate3d(0,0,1,90deg);
   -moz-transform:translateZ(2px) rotate3d(0,0,1,90deg);
    -ms-transform:translateZ(2px) rotate3d(0,0,1,90deg);
     -o-transform:translateZ(2px) rotate3d(0,0,1,90deg);
        transform:translateZ(2px) rotate3d(0,0,1,90deg);
/*transform-style*/
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
}
.car>li{
font-size:0;
display:inline-block;
position:absolute;
background:#fc0;
/*transition*/
-webkit-transition:all 0.3s ease-out;
   -moz-transition:all 0.3s ease-out;
     -o-transition:all 0.3s ease-out;
        transition:all 0.3s ease-out;
}
.car .roof{
background:#777;
width:5px;
height:10px;
/*transform*/
-webkit-transform:translate3d(0,0,5px);
   -moz-transform:translate3d(0,0,5px);
    -ms-transform:translate3d(0,0,5px);
     -o-transform:translate3d(0,0,5px);
        transform:translate3d(0,0,5px);
}
.car .door-left{
background:#555;
width:5px;
height:10px;
/*transform-origin*/
-webkit-transform-origin:0 0;
   -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
     -o-transform-origin:0 0;
        transform-origin:0 0;
/*transform*/
-webkit-transform:rotate3d(0,1,0,-90deg);
   -moz-transform:rotate3d(0,1,0,-90deg);
    -ms-transform:rotate3d(0,1,0,-90deg);
     -o-transform:rotate3d(0,1,0,-90deg);
        transform:rotate3d(0,1,0,-90deg);
}
.car .door-right{
background:#777;
width:5px;
height:10px;
/*transform-origin*/
-webkit-transform-origin:100% 0;
   -moz-transform-origin:100% 0;
    -ms-transform-origin:100% 0;
     -o-transform-origin:100% 0;
        transform-origin:100% 0;
/*transform*/
-webkit-transform:rotate3d(0,1,0,90deg);
   -moz-transform:rotate3d(0,1,0,90deg);
    -ms-transform:rotate3d(0,1,0,90deg);
     -o-transform:rotate3d(0,1,0,90deg);
        transform:rotate3d(0,1,0,90deg);
}
.car .front{
background:#666;
width:5px;
height:5px;
/*transform-origin*/
-webkit-transform-origin:0 0;
   -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
     -o-transform-origin:0 0;
        transform-origin:0 0;
/*transform*/
-webkit-transform:rotate3d(1,0,0,90deg);
   -moz-transform:rotate3d(1,0,0,90deg);
    -ms-transform:rotate3d(1,0,0,90deg);
     -o-transform:rotate3d(1,0,0,90deg);
        transform:rotate3d(1,0,0,90deg);
}
.car .trunk{
background:#444;
width:5px;
height:5px;
/*transform-origin*/
-webkit-transform-origin:100% 100%;
   -moz-transform-origin:100% 100%;
    -ms-transform-origin:100% 100%;
     -o-transform-origin:100% 100%;
        transform-origin:100% 100%;
/*transform*/
-webkit-transform:translateY(5px) rotate3d(1,0,0,-90deg);
   -moz-transform:translateY(5px) rotate3d(1,0,0,-90deg);
    -ms-transform:translateY(5px) rotate3d(1,0,0,-90deg);
     -o-transform:translateY(5px) rotate3d(1,0,0,-90deg);
        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%;
/*transform*/
-webkit-transform:translateZ(2px) rotate3d(0,0,1,0deg);
   -moz-transform:translateZ(2px) rotate3d(0,0,1,0deg);
    -ms-transform:translateZ(2px) rotate3d(0,0,1,0deg);
     -o-transform:translateZ(2px) rotate3d(0,0,1,0deg);
        transform:translateZ(2px) rotate3d(0,0,1,0deg);
}

Check out our Python playground!