css实现windows 3.1三维时钟效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现windows 3.1三维时钟效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-size: 8px; height: 100vh; margin: 0; } .container, .block, .inner > div, .hr, .min { position: absolute; } .container, .surface, .block, .outer, .inner { transform-style: preserve-3d; } .container, .inner > div { display: flex; } .container { background: #188080; margin: auto; overflow: hidden; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; perspective: 1000px; } .surface { display: block; width: 32em; height: 4em; margin: auto; transform: translateY(16em) rotateX(60deg) rotateZ(-30deg); will-change: transform; } .block { display: none; bottom: 0; } .inner > div { flex-wrap: wrap; align-content: flex-start; width: 1em; height: 1em; } .inner > div.front:before, .inner > div.back:before, .inner > div.left:before, .inner > div.right:before { background-color: #000; content: ""; width: 100%; height: 100%; } .inner > div.front:before, .inner > div.back:before { opacity: 0.2; } .inner > div.left:before, .inner > div.right:before { opacity: 0.4; } .outer, .inner { position: relative; width: 1em; } .inner { transform: rotateX(-90deg) translateZ(1em); } .back { transform: translateZ(-1em) rotateY(180deg); } .left { transform-origin: center left; transform: rotateY(270deg) translateX(-1em); } .right { transform-origin: top right; } .top, .bottom { transform-origin: top center; } .b1 { display: inherit; transform: translate3d(1em, -4em, 1em); } .b1 .inner div { background-color: #333; } .b1 .inner div.top, .b1 .inner div.bottom { width: 30em; height: 3em; } .b1 .inner div.top { transform: rotateX(-90deg) translateY(-2em); } .b1 .inner div.bottom { transform: rotateX(-90deg) translateY(-2em) translateZ(1em); } .b1 .inner div.front, .b1 .inner div.back { width: 30em; } .b1 .inner div.front { transform: translateZ(2em); } .b1 .inner div.left, .b1 .inner div.right { width: 3em; } .b1 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 27em); } .b2 { display: inherit; transform: translate3d(31em, -4em, 31em); } .b2 .inner div { background-color: #333; } .b2 .inner div.top, .b2 .inner div.bottom { height: 3em; } .b2 .inner div.top { transform: rotateX(-90deg) translateY(-2em); } .b2 .inner div.bottom { transform: rotateX(-90deg) translateY(-2em) translateZ(30em); } .b2 .inner div.front, .b2 .inner div.back { height: 30em; } .b2 .inner div.front { transform: translateZ(2em); } .b2 .inner div.left, .b2 .inner div.right { width: 3em; height: 30em; } .b2 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, -2em); } .b3 { display: inherit; transform: translate3d(1em, -1em, 2em); } .b3 .inner div { background-color: #800b00; } .b3 .inner div.top, .b3 .inner div.bottom { width: 30em; } .b3 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b3 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b3 .inner div.front, .b3 .inner div.back { width: 30em; } .b3 .inner div.front { transform: translateZ(0em); } .b3 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 29em); } .b4 { display: inherit; transform: translate3d(0em, -4em, 31em); } .b4 .inner div { background-color: #333; } .b4 .inner div.top, .b4 .inner div.bottom { height: 3em; } .b4 .inner div.top { transform: rotateX(-90deg) translateY(-2em); } .b4 .inner div.bottom { transform: rotateX(-90deg) translateY(-2em) translateZ(30em); } .b4 .inner div.front, .b4 .inner div.back { height: 30em; } .b4 .inner div.front { transform: translateZ(2em); } .b4 .inner div.left, .b4 .inner div.right { width: 3em; height: 30em; } .b4 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, -2em); } .b5 { display: inherit; transform: translate3d(30em, -1em, 31em); } .b5 .inner div { background-color: #800b00; } .b5 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b5 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(29em); } .b5 .inner div.front, .b5 .inner div.back { height: 29em; } .b5 .inner div.front { transform: translateZ(0em); } .b5 .inner div.left, .b5 .inner div.right { height: 29em; } .b5 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b6 { display: inherit; transform: translate3d(29em, -1em, 30em); } .b6 .inner div { background-color: #fa2000; } .b6 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b6 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(28em); } .b6 .inner div.front, .b6 .inner div.back { height: 28em; } .b6 .inner div.front { transform: translateZ(0em); } .b6 .inner div.left, .b6 .inner div.right { height: 28em; } .b6 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b7 { display: inherit; transform: translate3d(28em, -2em, 28em); } .b7 .inner div { background-color: #800b00; } .b7 .inner div.top, .b7 .inner div.bottom { height: 2em; } .b7 .inner div.top { transform: rotateX(-90deg) translateY(-1em); } .b7 .inner div.bottom { transform: rotateX(-90deg) translateY(-1em) translateZ(25em); } .b7 .inner div.front, .b7 .inner div.back { height: 25em; } .b7 .inner div.front { transform: translateZ(1em); } .b7 .inner div.left, .b7 .inner div.right { width: 2em; height: 25em; } .b7 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, -1em); } .b8 { display: inherit; transform: translate3d(4em, -3em, 28em); } .b8 .inner div { background-color: #c0c0c0; } .b8 .inner div.top, .b8 .inner div.bottom { width: 24em; } .b8 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b8 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(24em); } .b8 .inner div.front, .b8 .inner div.back { width: 24em; height: 24em; } .b8 .inner div.front { transform: translateZ(0em); } .b8 .inner div.left, .b8 .inner div.right { height: 24em; } .b8 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 23em); } .b9 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b9 .inner div { background-color: #333; } .b9 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b9 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b9 .inner div.front { transform: translateZ(0em); } .b9 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b10 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b10 .inner div { background-color: #333; } .b10 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b10 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b10 .inner div.front { transform: translateZ(0em); } .b10 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b11 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b11 .inner div { background-color: #333; } .b11 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b11 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b11 .inner div.front { transform: translateZ(0em); } .b11 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b12 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b12 .inner div { background-color: #333; } .b12 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b12 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b12 .inner div.front { transform: translateZ(0em); } .b12 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b13 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b13 .inner div { background-color: #333; } .b13 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b13 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b13 .inner div.front { transform: translateZ(0em); } .b13 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b14 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b14 .inner div { background-color: #333; } .b14 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b14 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b14 .inner div.front { transform: translateZ(0em); } .b14 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b15 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b15 .inner div { background-color: #333; } .b15 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b15 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b15 .inner div.front { transform: translateZ(0em); } .b15 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b16 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b16 .inner div { background-color: #333; } .b16 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b16 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b16 .inner div.front { transform: translateZ(0em); } .b16 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b17 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b17 .inner div { background-color: #333; } .b17 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b17 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b17 .inner div.front { transform: translateZ(0em); } .b17 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b18 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b18 .inner div { background-color: #333; } .b18 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b18 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b18 .inner div.front { transform: translateZ(0em); } .b18 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b19 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b19 .inner div { background-color: #333; } .b19 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b19 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b19 .inner div.front { transform: translateZ(0em); } .b19 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b20 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b20 .inner div { background-color: #333; } .b20 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b20 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b20 .inner div.front { transform: translateZ(0em); } .b20 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b21 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b21 .inner div { background-color: #333; } .b21 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b21 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b21 .inner div.front { transform: translateZ(0em); } .b21 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b22 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b22 .inner div { background-color: #333; } .b22 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b22 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b22 .inner div.front { transform: translateZ(0em); } .b22 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b23 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b23 .inner div { background-color: #333; } .b23 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b23 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b23 .inner div.front { transform: translateZ(0em); } .b23 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b24 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b24 .inner div { background-color: #333; } .b24 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b24 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b24 .inner div.front { transform: translateZ(0em); } .b24 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b25 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b25 .inner div { background-color: #333; } .b25 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b25 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b25 .inner div.front { transform: translateZ(0em); } .b25 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b26 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b26 .inner div { background-color: #333; } .b26 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b26 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b26 .inner div.front { transform: translateZ(0em); } .b26 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b27 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b27 .inner div { background-color: #333; } .b27 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b27 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b27 .inner div.front { transform: translateZ(0em); } .b27 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b28 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b28 .inner div { background-color: #333; } .b28 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b28 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b28 .inner div.front { transform: translateZ(0em); } .b28 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b29 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b29 .inner div { background-color: #333; } .b29 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b29 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b29 .inner div.front { transform: translateZ(0em); } .b29 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b30 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b30 .inner div { background-color: #333; } .b30 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b30 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b30 .inner div.front { transform: translateZ(0em); } .b30 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b31 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b31 .inner div { background-color: #333; } .b31 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b31 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b31 .inner div.front { transform: translateZ(0em); } .b31 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b32 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b32 .inner div { background-color: #333; } .b32 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b32 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b32 .inner div.front { transform: translateZ(0em); } .b32 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b33 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b33 .inner div { background-color: #333; } .b33 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b33 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b33 .inner div.front { transform: translateZ(0em); } .b33 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b34 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b34 .inner div { background-color: #333; } .b34 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b34 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b34 .inner div.front { transform: translateZ(0em); } .b34 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b35 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b35 .inner div { background-color: #333; } .b35 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b35 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b35 .inner div.front { transform: translateZ(0em); } .b35 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b36 { display: inherit; transform: translate3d(16em, -2em, 16em); } .b36 .inner div { background-color: #333; } .b36 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b36 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b36 .inner div.front { transform: translateZ(0em); } .b36 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b37 { display: inherit; transform: translate3d(21em, -2em, 26em); } .b37 .inner div { background-color: #333; } .b37 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b37 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(2em); } .b37 .inner div.front, .b37 .inner div.back { height: 2em; } .b37 .inner div.front { transform: translateZ(0em); } .b37 .inner div.left, .b37 .inner div.right { height: 2em; } .b37 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b38 { display: inherit; transform: translate3d(20em, -2em, 25em); } .b38 .inner div { background-color: #333; } .b38 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b38 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b38 .inner div.front { transform: translateZ(0em); } .b38 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b39 { display: inherit; transform: translate3d(20em, -2em, 26em); } .b39 .inner div { background-color: #fff; } .b39 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b39 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b39 .inner div.front { transform: translateZ(0em); } .b39 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b40 { display: inherit; transform: translate3d(25em, -2em, 22em); } .b40 .inner div { background-color: #333; } .b40 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b40 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(2em); } .b40 .inner div.front, .b40 .inner div.back { height: 2em; } .b40 .inner div.front { transform: translateZ(0em); } .b40 .inner div.left, .b40 .inner div.right { height: 2em; } .b40 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b41 { display: inherit; transform: translate3d(24em, -2em, 21em); } .b41 .inner div { background-color: #333; } .b41 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b41 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b41 .inner div.front { transform: translateZ(0em); } .b41 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b42 { display: inherit; transform: translate3d(24em, -2em, 22em); } .b42 .inner div { background-color: #fff; } .b42 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b42 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b42 .inner div.front { transform: translateZ(0em); } .b42 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b43 { display: inherit; transform: translate3d(26em, -2em, 17em); } .b43 .inner div { background-color: #333; } .b43 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b43 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(2em); } .b43 .inner div.front, .b43 .inner div.back { height: 2em; } .b43 .inner div.front { transform: translateZ(0em); } .b43 .inner div.left, .b43 .inner div.right { height: 2em; } .b43 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b44 { display: inherit; transform: translate3d(25em, -2em, 16em); } .b44 .inner div { background-color: #333; } .b44 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b44 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b44 .inner div.front { transform: translateZ(0em); } .b44 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b45 { display: inherit; transform: translate3d(25em, -2em, 17em); } .b45 .inner div { background-color: #fff; } .b45 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b45 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b45 .inner div.front { transform: translateZ(0em); } .b45 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b46 { display: inherit; transform: translate3d(25em, -2em, 12em); } .b46 .inner div { background-color: #333; } .b46 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b46 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(2em); } .b46 .inner div.front, .b46 .inner div.back { height: 2em; } .b46 .inner div.front { transform: translateZ(0em); } .b46 .inner div.left, .b46 .inner div.right { height: 2em; } .b46 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b47 { display: inherit; transform: translate3d(24em, -2em, 11em); } .b47 .inner div { background-color: #333; } .b47 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b47 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b47 .inner div.front { transform: translateZ(0em); } .b47 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b48 { display: inherit; transform: translate3d(24em, -2em, 12em); } .b48 .inner div { background-color: #fff; } .b48 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b48 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b48 .inner div.front { transform: translateZ(0em); } .b48 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b49 { display: inherit; transform: translate3d(21em, -2em, 8em); } .b49 .inner div { background-color: #333; } .b49 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b49 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(2em); } .b49 .inner div.front, .b49 .inner div.back { height: 2em; } .b49 .inner div.front { transform: translateZ(0em); } .b49 .inner div.left, .b49 .inner div.right { height: 2em; } .b49 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b50 { display: inherit; transform: translate3d(20em, -2em, 7em); } .b50 .inner div { background-color: #333; } .b50 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b50 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b50 .inner div.front { transform: translateZ(0em); } .b50 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b51 { display: inherit; transform: translate3d(20em, -2em, 8em); } .b51 .inner div { background-color: #fff; } .b51 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b51 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b51 .inner div.front { transform: translateZ(0em); } .b51 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b52 { display: inherit; transform: translate3d(16em, -2em, 7em); } .b52 .inner div { background-color: #333; } .b52 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b52 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(2em); } .b52 .inner div.front, .b52 .inner div.back { height: 2em; } .b52 .inner div.front { transform: translateZ(0em); } .b52 .inner div.left, .b52 .inner div.right { height: 2em; } .b52 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b53 { display: inherit; transform: translate3d(15em, -2em, 6em); } .b53 .inner div { background-color: #333; } .b53 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b53 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b53 .inner div.front { transform: translateZ(0em); } .b53 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b54 { display: inherit; transform: translate3d(15em, -2em, 7em); } .b54 .inner div { background-color: #fff; } .b54 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b54 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b54 .inner div.front { transform: translateZ(0em); } .b54 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b55 { display: inherit; transform: translate3d(11em, -2em, 8em); } .b55 .inner div { background-color: #333; } .b55 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b55 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(2em); } .b55 .inner div.front, .b55 .inner div.back { height: 2em; } .b55 .inner div.front { transform: translateZ(0em); } .b55 .inner div.left, .b55 .inner div.right { height: 2em; } .b55 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b56 { display: inherit; transform: translate3d(10em, -2em, 7em); } .b56 .inner div { background-color: #333; } .b56 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b56 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b56 .inner div.front { transform: translateZ(0em); } .b56 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b57 { display: inherit; transform: translate3d(10em, -2em, 8em); } .b57 .inner div { background-color: #fff; } .b57 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b57 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b57 .inner div.front { transform: translateZ(0em); } .b57 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b58 { display: inherit; transform: translate3d(7em, -2em, 12em); } .b58 .inner div { background-color: #333; } .b58 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b58 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(2em); } .b58 .inner div.front, .b58 .inner div.back { height: 2em; } .b58 .inner div.front { transform: translateZ(0em); } .b58 .inner div.left, .b58 .inner div.right { height: 2em; } .b58 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b59 { display: inherit; transform: translate3d(6em, -2em, 11em); } .b59 .inner div { background-color: #333; } .b59 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b59 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b59 .inner div.front { transform: translateZ(0em); } .b59 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b60 { display: inherit; transform: translate3d(6em, -2em, 12em); } .b60 .inner div { background-color: #fff; } .b60 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b60 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b60 .inner div.front { transform: translateZ(0em); } .b60 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b61 { display: inherit; transform: translate3d(6em, -2em, 17em); } .b61 .inner div { background-color: #333; } .b61 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b61 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(2em); } .b61 .inner div.front, .b61 .inner div.back { height: 2em; } .b61 .inner div.front { transform: translateZ(0em); } .b61 .inner div.left, .b61 .inner div.right { height: 2em; } .b61 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b62 { display: inherit; transform: translate3d(5em, -2em, 16em); } .b62 .inner div { background-color: #333; } .b62 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b62 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b62 .inner div.front { transform: translateZ(0em); } .b62 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b63 { display: inherit; transform: translate3d(5em, -2em, 17em); } .b63 .inner div { background-color: #fff; } .b63 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b63 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b63 .inner div.front { transform: translateZ(0em); } .b63 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b64 { display: inherit; transform: translate3d(7em, -2em, 22em); } .b64 .inner div { background-color: #333; } .b64 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b64 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(2em); } .b64 .inner div.front, .b64 .inner div.back { height: 2em; } .b64 .inner div.front { transform: translateZ(0em); } .b64 .inner div.left, .b64 .inner div.right { height: 2em; } .b64 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b65 { display: inherit; transform: translate3d(6em, -2em, 21em); } .b65 .inner div { background-color: #333; } .b65 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b65 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b65 .inner div.front { transform: translateZ(0em); } .b65 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b66 { display: inherit; transform: translate3d(6em, -2em, 22em); } .b66 .inner div { background-color: #fff; } .b66 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b66 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b66 .inner div.front { transform: translateZ(0em); } .b66 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b67 { display: inherit; transform: translate3d(11em, -2em, 26em); } .b67 .inner div { background-color: #333; } .b67 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b67 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(2em); } .b67 .inner div.front, .b67 .inner div.back { height: 2em; } .b67 .inner div.front { transform: translateZ(0em); } .b67 .inner div.left, .b67 .inner div.right { height: 2em; } .b67 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b68 { display: inherit; transform: translate3d(10em, -2em, 25em); } .b68 .inner div { background-color: #333; } .b68 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b68 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b68 .inner div.front { transform: translateZ(0em); } .b68 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b69 { display: inherit; transform: translate3d(10em, -2em, 26em); } .b69 .inner div { background-color: #fff; } .b69 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b69 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b69 .inner div.front { transform: translateZ(0em); } .b69 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b70 { display: inherit; transform: translate3d(16em, -2em, 27em); } .b70 .inner div { background-color: #333; } .b70 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b70 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(2em); } .b70 .inner div.front, .b70 .inner div.back { height: 2em; } .b70 .inner div.front { transform: translateZ(0em); } .b70 .inner div.left, .b70 .inner div.right { height: 2em; } .b70 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b71 { display: inherit; transform: translate3d(15em, -2em, 26em); } .b71 .inner div { background-color: #333; } .b71 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b71 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b71 .inner div.front { transform: translateZ(0em); } .b71 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b72 { display: inherit; transform: translate3d(15em, -2em, 27em); } .b72 .inner div { background-color: #fff; } .b72 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b72 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b72 .inner div.front { transform: translateZ(0em); } .b72 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b73 { display: inherit; transform: translate3d(1em, -1em, 3em); } .b73 .inner div { background-color: #fa2000; } .b73 .inner div.top, .b73 .inner div.bottom { width: 28em; } .b73 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b73 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b73 .inner div.front, .b73 .inner div.back { width: 28em; } .b73 .inner div.front { transform: translateZ(0em); } .b73 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 27em); } .b74 { display: inherit; transform: translate3d(1em, -1em, 30em); } .b74 .inner div { background-color: #fa2000; } .b74 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b74 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(27em); } .b74 .inner div.front, .b74 .inner div.back { height: 27em; } .b74 .inner div.front { transform: translateZ(0em); } .b74 .inner div.left, .b74 .inner div.right { height: 27em; } .b74 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b75 { display: inherit; transform: translate3d(4em, -2em, 4em); } .b75 .inner div { background-color: #800b00; } .b75 .inner div.top, .b75 .inner div.bottom { width: 24em; height: 2em; } .b75 .inner div.top { transform: rotateX(-90deg) translateY(-1em); } .b75 .inner div.bottom { transform: rotateX(-90deg) translateY(-1em) translateZ(1em); } .b75 .inner div.front, .b75 .inner div.back { width: 24em; } .b75 .inner div.front { transform: translateZ(1em); } .b75 .inner div.left, .b75 .inner div.right { width: 2em; } .b75 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 22em); } .b76 { display: inherit; transform: translate3d(3em, -2em, 28em); } .b76 .inner div { background-color: #333; } .b76 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b76 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(25em); } .b76 .inner div.front, .b76 .inner div.back { height: 25em; } .b76 .inner div.front { transform: translateZ(0em); } .b76 .inner div.left, .b76 .inner div.right { height: 25em; } .b76 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b77 { display: inherit; transform: translate3d(2em, -1em, 29em); } .b77 .inner div { background-color: #800b00; } .b77 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b77 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(26em); } .b77 .inner div.front, .b77 .inner div.back { height: 26em; } .b77 .inner div.front { transform: translateZ(0em); } .b77 .inner div.left, .b77 .inner div.right { height: 26em; } .b77 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 0em); } .b78 { display: inherit; transform: translate3d(3em, -2em, 29em); } .b78 .inner div { background-color: #333; } .b78 .inner div.top, .b78 .inner div.bottom { width: 26em; } .b78 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b78 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b78 .inner div.front, .b78 .inner div.back { width: 26em; } .b78 .inner div.front { transform: translateZ(0em); } .b78 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 25em); } .b79 { display: inherit; transform: translate3d(2em, -1em, 30em); } .b79 .inner div { background-color: #800b00; } .b79 .inner div.top, .b79 .inner div.bottom { width: 27em; } .b79 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b79 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b79 .inner div.front, .b79 .inner div.back { width: 27em; } .b79 .inner div.front { transform: translateZ(0em); } .b79 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 26em); } .b80 { display: inherit; transform: translate3d(1em, -1em, 31em); } .b80 .inner div { background-color: #fa2000; } .b80 .inner div.top, .b80 .inner div.bottom { width: 29em; } .b80 .inner div.top { transform: rotateX(-90deg) translateY(0em); } .b80 .inner div.bottom { transform: rotateX(-90deg) translateY(0em) translateZ(1em); } .b80 .inner div.front, .b80 .inner div.back { width: 29em; } .b80 .inner div.front { transform: translateZ(0em); } .b80 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 28em); } .b81 { display: inherit; transform: translate3d(1em, -4em, 32em); } .b81 .inner div { background-color: #333; } .b81 .inner div.top, .b81 .inner div.bottom { width: 30em; height: 3em; } .b81 .inner div.top { transform: rotateX(-90deg) translateY(-2em); } .b81 .inner div.bottom { transform: rotateX(-90deg) translateY(-2em) translateZ(1em); } .b81 .inner div.front, .b81 .inner div.back { width: 30em; } .b81 .inner div.front { transform: translateZ(2em); } .b81 .inner div.left, .b81 .inner div.right { width: 3em; } .b81 .inner div.right { transform: rotateY(-270deg) translate3d(1em, 0, 27em); } .hr._0 ~ .surface .b9 .outer { transform: translate3d(0em, 0em, -2em); } .hr._0 ~ .surface .b10 .outer { transform: translate3d(0em, 0em, -1em); } .hr._0 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._0 ~ .surface .b12 .outer { transform: translate3d(0em, 0em, 1em); } .hr._0 ~ .surface .b13 .outer { transform: translate3d(0em, 0em, 2em); } .hr._0 ~ .surface .b14 .outer { transform: translate3d(0em, 0em, 3em); } .hr._0 ~ .surface .b15 .outer { transform: translate3d(0em, 0em, 4em); } .hr._0 ~ .surface .b16 .outer { transform: translate3d(0em, 0em, 5em); } .hr._0 ~ .surface .b17 .outer { transform: translate3d(0em, 0em, 6em); } .hr._0-5 ~ .surface .b9 .outer { transform: translate3d(-1em, 0em, -2em); } .hr._0-5 ~ .surface .b10 .outer { transform: translate3d(0em, 0em, -1em); } .hr._0-5 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._0-5 ~ .surface .b12 .outer { transform: translate3d(0em, 0em, 1em); } .hr._0-5 ~ .surface .b13 .outer { transform: translate3d(1em, 0em, 2em); } .hr._0-5 ~ .surface .b14 .outer { transform: translate3d(1em, 0em, 3em); } .hr._0-5 ~ .surface .b15 .outer { transform: translate3d(1em, 0em, 4em); } .hr._0-5 ~ .surface .b16 .outer { transform: translate3d(1em, 0em, 5em); } .hr._0-5 ~ .surface .b17 .outer { transform: translate3d(2em, 0em, 6em); } .hr._1 ~ .surface .b9 .outer { transform: translate3d(-1em, 0em, -2em); } .hr._1 ~ .surface .b10 .outer { transform: translate3d(-1em, 0em, -1em); } .hr._1 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._1 ~ .surface .b12 .outer { transform: translate3d(0em, 0em, 1em); } .hr._1 ~ .surface .b13 .outer { transform: translate3d(1em, 0em, 1em); } .hr._1 ~ .surface .b14 .outer { transform: translate3d(1em, 0em, 2em); } .hr._1 ~ .surface .b15 .outer { transform: translate3d(2em, 0em, 3em); } .hr._1 ~ .surface .b16 .outer { transform: translate3d(2em, 0em, 4em); } .hr._1 ~ .surface .b17 .outer { transform: translate3d(3em, 0em, 5em); } .hr._1-5 ~ .surface .b9 .outer { transform: translate3d(-1em, 0em, -1em); } .hr._1-5 ~ .surface .b10 .outer { transform: translate3d(0em, 0em, 0em); } .hr._1-5 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._1-5 ~ .surface .b12 .outer { transform: translate3d(0em, 0em, 0em); } .hr._1-5 ~ .surface .b13 .outer { transform: translate3d(0em, 0em, 0em); } .hr._1-5 ~ .surface .b14 .outer { transform: translate3d(1em, 0em, 1em); } .hr._1-5 ~ .surface .b15 .outer { transform: translate3d(2em, 0em, 2em); } .hr._1-5 ~ .surface .b16 .outer { transform: translate3d(3em, 0em, 3em); } .hr._1-5 ~ .surface .b17 .outer { transform: translate3d(4em, 0em, 4em); } .hr._2 ~ .surface .b9 .outer { transform: translate3d(-2em, 0em, -1em); } .hr._2 ~ .surface .b10 .outer { transform: translate3d(-1em, 0em, -1em); } .hr._2 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._2 ~ .surface .b12 .outer { transform: translate3d(1em, 0em, 0em); } .hr._2 ~ .surface .b13 .outer { transform: translate3d(1em, 0em, 1em); } .hr._2 ~ .surface .b14 .outer { transform: translate3d(2em, 0em, 1em); } .hr._2 ~ .surface .b15 .outer { transform: translate3d(3em, 0em, 2em); } .hr._2 ~ .surface .b16 .outer { transform: translate3d(4em, 0em, 2em); } .hr._2 ~ .surface .b17 .outer { transform: translate3d(5em, 0em, 3em); } .hr._2-5 ~ .surface .b9 .outer { transform: translate3d(-2em, 0em, -1em); } .hr._2-5 ~ .surface .b10 .outer { transform: translate3d(-1em, 0em, 0em); } .hr._2-5 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._2-5 ~ .surface .b12 .outer { transform: translate3d(1em, 0em, 0em); } .hr._2-5 ~ .surface .b13 .outer { transform: translate3d(2em, 0em, 1em); } .hr._2-5 ~ .surface .b14 .outer { transform: translate3d(3em, 0em, 1em); } .hr._2-5 ~ .surface .b15 .outer { transform: translate3d(4em, 0em, 1em); } .hr._2-5 ~ .surface .b16 .outer { transform: translate3d(5em, 0em, 1em); } .hr._2-5 ~ .surface .b17 .outer { transform: translate3d(6em, 0em, 2em); } .hr._3 ~ .surface .b9 .outer { transform: translate3d(-2em, 0em, 0em); } .hr._3 ~ .surface .b10 .outer { transform: translate3d(-1em, 0em, 0em); } .hr._3 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._3 ~ .surface .b12 .outer { transform: translate3d(1em, 0em, 0em); } .hr._3 ~ .surface .b13 .outer { transform: translate3d(2em, 0em, 0em); } .hr._3 ~ .surface .b14 .outer { transform: translate3d(3em, 0em, 0em); } .hr._3 ~ .surface .b15 .outer { transform: translate3d(4em, 0em, 0em); } .hr._3 ~ .surface .b16 .outer { transform: translate3d(5em, 0em, 0em); } .hr._3 ~ .surface .b17 .outer { transform: translate3d(6em, 0em, 0em); } .hr._3-5 ~ .surface .b9 .outer { transform: translate3d(-2em, 0em, 1em); } .hr._3-5 ~ .surface .b10 .outer { transform: translate3d(-1em, 0em, 0em); } .hr._3-5 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._3-5 ~ .surface .b12 .outer { transform: translate3d(1em, 0em, 0em); } .hr._3-5 ~ .surface .b13 .outer { transform: translate3d(2em, 0em, -1em); } .hr._3-5 ~ .surface .b14 .outer { transform: translate3d(3em, 0em, -1em); } .hr._3-5 ~ .surface .b15 .outer { transform: translate3d(4em, 0em, -1em); } .hr._3-5 ~ .surface .b16 .outer { transform: translate3d(5em, 0em, -1em); } .hr._3-5 ~ .surface .b17 .outer { transform: translate3d(6em, 0em, -2em); } .hr._4 ~ .surface .b9 .outer { transform: translate3d(-2em, 0em, 1em); } .hr._4 ~ .surface .b10 .outer { transform: translate3d(-1em, 0em, 1em); } .hr._4 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._4 ~ .surface .b12 .outer { transform: translate3d(1em, 0em, 0em); } .hr._4 ~ .surface .b13 .outer { transform: translate3d(1em, 0em, -1em); } .hr._4 ~ .surface .b14 .outer { transform: translate3d(2em, 0em, -1em); } .hr._4 ~ .surface .b15 .outer { transform: translate3d(3em, 0em, -2em); } .hr._4 ~ .surface .b16 .outer { transform: translate3d(4em, 0em, -2em); } .hr._4 ~ .surface .b17 .outer { transform: translate3d(5em, 0em, -3em); } .hr._4-5 ~ .surface .b9 .outer { transform: translate3d(-1em, 0em, 1em); } .hr._4-5 ~ .surface .b10 .outer { transform: translate3d(0em, 0em, 0em); } .hr._4-5 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._4-5 ~ .surface .b12 .outer { transform: translate3d(0em, 0em, 0em); } .hr._4-5 ~ .surface .b13 .outer { transform: translate3d(0em, 0em, 0em); } .hr._4-5 ~ .surface .b14 .outer { transform: translate3d(1em, 0em, -1em); } .hr._4-5 ~ .surface .b15 .outer { transform: translate3d(2em, 0em, -2em); } .hr._4-5 ~ .surface .b16 .outer { transform: translate3d(3em, 0em, -3em); } .hr._4-5 ~ .surface .b17 .outer { transform: translate3d(4em, 0em, -4em); } .hr._5 ~ .surface .b9 .outer { transform: translate3d(-1em, 0em, 2em); } .hr._5 ~ .surface .b10 .outer { transform: translate3d(-1em, 0em, 1em); } .hr._5 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._5 ~ .surface .b12 .outer { transform: translate3d(0em, 0em, -1em); } .hr._5 ~ .surface .b13 .outer { transform: translate3d(1em, 0em, -1em); } .hr._5 ~ .surface .b14 .outer { transform: translate3d(1em, 0em, -2em); } .hr._5 ~ .surface .b15 .outer { transform: translate3d(2em, 0em, -3em); } .hr._5 ~ .surface .b16 .outer { transform: translate3d(2em, 0em, -4em); } .hr._5 ~ .surface .b17 .outer { transform: translate3d(3em, 0em, -5em); } .hr._5-5 ~ .surface .b9 .outer { transform: translate3d(-1em, 0em, 2em); } .hr._5-5 ~ .surface .b10 .outer { transform: translate3d(0em, 0em, 1em); } .hr._5-5 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._5-5 ~ .surface .b12 .outer { transform: translate3d(0em, 0em, -1em); } .hr._5-5 ~ .surface .b13 .outer { transform: translate3d(1em, 0em, -2em); } .hr._5-5 ~ .surface .b14 .outer { transform: translate3d(1em, 0em, -3em); } .hr._5-5 ~ .surface .b15 .outer { transform: translate3d(1em, 0em, -4em); } .hr._5-5 ~ .surface .b16 .outer { transform: translate3d(1em, 0em, -5em); } .hr._5-5 ~ .surface .b17 .outer { transform: translate3d(2em, 0em, -6em); } .hr._6 ~ .surface .b9 .outer { transform: translate3d(0em, 0em, 2em); } .hr._6 ~ .surface .b10 .outer { transform: translate3d(0em, 0em, 1em); } .hr._6 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._6 ~ .surface .b12 .outer { transform: translate3d(0em, 0em, -1em); } .hr._6 ~ .surface .b13 .outer { transform: translate3d(0em, 0em, -2em); } .hr._6 ~ .surface .b14 .outer { transform: translate3d(0em, 0em, -3em); } .hr._6 ~ .surface .b15 .outer { transform: translate3d(0em, 0em, -4em); } .hr._6 ~ .surface .b16 .outer { transform: translate3d(0em, 0em, -5em); } .hr._6 ~ .surface .b17 .outer { transform: translate3d(0em, 0em, -6em); } .hr._6-5 ~ .surface .b9 .outer { transform: translate3d(1em, 0em, 2em); } .hr._6-5 ~ .surface .b10 .outer { transform: translate3d(0em, 0em, 1em); } .hr._6-5 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._6-5 ~ .surface .b12 .outer { transform: translate3d(0em, 0em, -1em); } .hr._6-5 ~ .surface .b13 .outer { transform: translate3d(-1em, 0em, -2em); } .hr._6-5 ~ .surface .b14 .outer { transform: translate3d(-1em, 0em, -3em); } .hr._6-5 ~ .surface .b15 .outer { transform: translate3d(-1em, 0em, -4em); } .hr._6-5 ~ .surface .b16 .outer { transform: translate3d(-1em, 0em, -5em); } .hr._6-5 ~ .surface .b17 .outer { transform: translate3d(-2em, 0em, -6em); } .hr._7 ~ .surface .b9 .outer { transform: translate3d(1em, 0em, 2em); } .hr._7 ~ .surface .b10 .outer { transform: translate3d(1em, 0em, 1em); } .hr._7 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._7 ~ .surface .b12 .outer { transform: translate3d(0em, 0em, -1em); } .hr._7 ~ .surface .b13 .outer { transform: translate3d(-1em, 0em, -1em); } .hr._7 ~ .surface .b14 .outer { transform: translate3d(-1em, 0em, -2em); } .hr._7 ~ .surface .b15 .outer { transform: translate3d(-2em, 0em, -3em); } .hr._7 ~ .surface .b16 .outer { transform: translate3d(-2em, 0em, -4em); } .hr._7 ~ .surface .b17 .outer { transform: translate3d(-3em, 0em, -5em); } .hr._7-5 ~ .surface .b9 .outer { transform: translate3d(1em, 0em, 1em); } .hr._7-5 ~ .surface .b10 .outer { transform: translate3d(0em, 0em, 0em); } .hr._7-5 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._7-5 ~ .surface .b12 .outer { transform: translate3d(0em, 0em, 0em); } .hr._7-5 ~ .surface .b13 .outer { transform: translate3d(0em, 0em, 0em); } .hr._7-5 ~ .surface .b14 .outer { transform: translate3d(-1em, 0em, -1em); } .hr._7-5 ~ .surface .b15 .outer { transform: translate3d(-2em, 0em, -2em); } .hr._7-5 ~ .surface .b16 .outer { transform: translate3d(-3em, 0em, -3em); } .hr._7-5 ~ .surface .b17 .outer { transform: translate3d(-4em, 0em, -4em); } .hr._8 ~ .surface .b9 .outer { transform: translate3d(2em, 0em, 1em); } .hr._8 ~ .surface .b10 .outer { transform: translate3d(1em, 0em, 1em); } .hr._8 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._8 ~ .surface .b12 .outer { transform: translate3d(-1em, 0em, 0em); } .hr._8 ~ .surface .b13 .outer { transform: translate3d(-1em, 0em, -1em); } .hr._8 ~ .surface .b14 .outer { transform: translate3d(-2em, 0em, -1em); } .hr._8 ~ .surface .b15 .outer { transform: translate3d(-3em, 0em, -2em); } .hr._8 ~ .surface .b16 .outer { transform: translate3d(-4em, 0em, -2em); } .hr._8 ~ .surface .b17 .outer { transform: translate3d(-5em, 0em, -3em); } .hr._8-5 ~ .surface .b9 .outer { transform: translate3d(2em, 0em, 1em); } .hr._8-5 ~ .surface .b10 .outer { transform: translate3d(1em, 0em, 0em); } .hr._8-5 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._8-5 ~ .surface .b12 .outer { transform: translate3d(-1em, 0em, 0em); } .hr._8-5 ~ .surface .b13 .outer { transform: translate3d(-2em, 0em, -1em); } .hr._8-5 ~ .surface .b14 .outer { transform: translate3d(-3em, 0em, -1em); } .hr._8-5 ~ .surface .b15 .outer { transform: translate3d(-4em, 0em, -1em); } .hr._8-5 ~ .surface .b16 .outer { transform: translate3d(-5em, 0em, -1em); } .hr._8-5 ~ .surface .b17 .outer { transform: translate3d(-6em, 0em, -2em); } .hr._9 ~ .surface .b9 .outer { transform: translate3d(2em, 0em, 0em); } .hr._9 ~ .surface .b10 .outer { transform: translate3d(1em, 0em, 0em); } .hr._9 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._9 ~ .surface .b12 .outer { transform: translate3d(-1em, 0em, 0em); } .hr._9 ~ .surface .b13 .outer { transform: translate3d(-2em, 0em, 0em); } .hr._9 ~ .surface .b14 .outer { transform: translate3d(-3em, 0em, 0em); } .hr._9 ~ .surface .b15 .outer { transform: translate3d(-4em, 0em, 0em); } .hr._9 ~ .surface .b16 .outer { transform: translate3d(-5em, 0em, 0em); } .hr._9 ~ .surface .b17 .outer { transform: translate3d(-6em, 0em, 0em); } .hr._9-5 ~ .surface .b9 .outer { transform: translate3d(2em, 0em, -1em); } .hr._9-5 ~ .surface .b10 .outer { transform: translate3d(1em, 0em, 0em); } .hr._9-5 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._9-5 ~ .surface .b12 .outer { transform: translate3d(-1em, 0em, 0em); } .hr._9-5 ~ .surface .b13 .outer { transform: translate3d(-2em, 0em, 1em); } .hr._9-5 ~ .surface .b14 .outer { transform: translate3d(-3em, 0em, 1em); } .hr._9-5 ~ .surface .b15 .outer { transform: translate3d(-4em, 0em, 1em); } .hr._9-5 ~ .surface .b16 .outer { transform: translate3d(-5em, 0em, 1em); } .hr._9-5 ~ .surface .b17 .outer { transform: translate3d(-6em, 0em, 2em); } .hr._10 ~ .surface .b9 .outer { transform: translate3d(2em, 0em, -1em); } .hr._10 ~ .surface .b10 .outer { transform: translate3d(1em, 0em, -1em); } .hr._10 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._10 ~ .surface .b12 .outer { transform: translate3d(-1em, 0em, 0em); } .hr._10 ~ .surface .b13 .outer { transform: translate3d(-1em, 0em, 1em); } .hr._10 ~ .surface .b14 .outer { transform: translate3d(-2em, 0em, 1em); } .hr._10 ~ .surface .b15 .outer { transform: translate3d(-3em, 0em, 2em); } .hr._10 ~ .surface .b16 .outer { transform: translate3d(-4em, 0em, 2em); } .hr._10 ~ .surface .b17 .outer { transform: translate3d(-5em, 0em, 3em); } .hr._10-5 ~ .surface .b9 .outer { transform: translate3d(1em, 0em, -1em); } .hr._10-5 ~ .surface .b10 .outer { transform: translate3d(0em, 0em, 0em); } .hr._10-5 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._10-5 ~ .surface .b12 .outer { transform: translate3d(0em, 0em, 0em); } .hr._10-5 ~ .surface .b13 .outer { transform: translate3d(0em, 0em, 0em); } .hr._10-5 ~ .surface .b14 .outer { transform: translate3d(-1em, 0em, 1em); } .hr._10-5 ~ .surface .b15 .outer { transform: translate3d(-2em, 0em, 2em); } .hr._10-5 ~ .surface .b16 .outer { transform: translate3d(-3em, 0em, 3em); } .hr._10-5 ~ .surface .b17 .outer { transform: translate3d(-4em, 0em, 4em); } .hr._11 ~ .surface .b9 .outer { transform: translate3d(1em, 0em, -2em); } .hr._11 ~ .surface .b10 .outer { transform: translate3d(1em, 0em, -1em); } .hr._11 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._11 ~ .surface .b12 .outer { transform: translate3d(0em, 0em, 1em); } .hr._11 ~ .surface .b13 .outer { transform: translate3d(-1em, 0em, 1em); } .hr._11 ~ .surface .b14 .outer { transform: translate3d(-1em, 0em, 2em); } .hr._11 ~ .surface .b15 .outer { transform: translate3d(-2em, 0em, 3em); } .hr._11 ~ .surface .b16 .outer { transform: translate3d(-2em, 0em, 4em); } .hr._11 ~ .surface .b17 .outer { transform: translate3d(-3em, 0em, 5em); } .hr._11-5 ~ .surface .b9 .outer { transform: translate3d(1em, 0em, -2em); } .hr._11-5 ~ .surface .b10 .outer { transform: translate3d(0em, 0em, -1em); } .hr._11-5 ~ .surface .b11 .outer { transform: translate3d(0em, 0em, 0em); } .hr._11-5 ~ .surface .b12 .outer { transform: translate3d(0em, 0em, 1em); } .hr._11-5 ~ .surface .b13 .outer { transform: translate3d(-1em, 0em, 2em); } .hr._11-5 ~ .surface .b14 .outer { transform: translate3d(-1em, 0em, 3em); } .hr._11-5 ~ .surface .b15 .outer { transform: translate3d(-1em, 0em, 4em); } .hr._11-5 ~ .surface .b16 .outer { transform: translate3d(-1em, 0em, 5em); } .hr._11-5 ~ .surface .b17 .outer { transform: translate3d(-2em, 0em, 6em); } .min._0 ~ .surface .b18 .outer { transform: translate3d(0em, 0em, -3em); } .min._0 ~ .surface .b19 .outer { transform: translate3d(0em, 0em, -2em); } .min._0 ~ .surface .b20 .outer { transform: translate3d(0em, 0em, -1em); } .min._0 ~ .surface .b21 .outer { transform: translate3d(0em, 0em, 0em); } .min._0 ~ .surface .b22 .outer { transform: translate3d(0em, 0em, 1em); } .min._0 ~ .surface .b23 .outer { transform: translate3d(0em, 0em, 2em); } .min._0 ~ .surface .b24 .outer { transform: translate3d(0em, 0em, 3em); } .min._0 ~ .surface .b25 .outer { transform: translate3d(0em, 0em, 4em); } .min._0 ~ .surface .b26 .outer { transform: translate3d(0em, 0em, 5em); } .min._0 ~ .surface .b27 .outer { transform: translate3d(0em, 0em, 6em); } .min._0 ~ .surface .b28 .outer { transform: translate3d(0em, 0em, 7em); } .min._2-5 ~ .surface .b18 .outer { transform: translate3d(-1em, 0em, -3em); } .min._2-5 ~ .surface .b19 .outer { transform: translate3d(-1em, 0em, -2em); } .min._2-5 ~ .surface .b20 .outer { transform: translate3d(0em, 0em, -1em); } .min._2-5 ~ .surface .b21 .outer { transform: translate3d(0em, 0em, 0em); } .min._2-5 ~ .surface .b22 .outer { transform: translate3d(0em, 0em, 1em); } .min._2-5 ~ .surface .b23 .outer { transform: translate3d(1em, 0em, 2em); } .min._2-5 ~ .surface .b24 .outer { transform: translate3d(1em, 0em, 3em); } .min._2-5 ~ .surface .b25 .outer { transform: translate3d(1em, 0em, 4em); } .min._2-5 ~ .surface .b26 .outer { transform: translate3d(1em, 0em, 5em); } .min._2-5 ~ .surface .b27 .outer { transform: translate3d(2em, 0em, 6em); } .min._2-5 ~ .surface .b28 .outer { transform: translate3d(2em, 0em, 7em); } .min._5 ~ .surface .b18 .outer { transform: translate3d(-1em, 0em, -2em); } .min._5 ~ .surface .b19 .outer { transform: translate3d(-1em, 0em, -1em); } .min._5 ~ .surface .b20 .outer { transform: translate3d(0em, 0em, 0em); } .min._5 ~ .surface .b21 .outer { transform: translate3d(0em, 0em, 0em); } .min._5 ~ .surface .b22 .outer { transform: translate3d(1em, 0em, 1em); } .min._5 ~ .surface .b23 .outer { transform: translate3d(1em, 0em, 2em); } .min._5 ~ .surface .b24 .outer { transform: translate3d(2em, 0em, 3em); } .min._5 ~ .surface .b25 .outer { transform: translate3d(2em, 0em, 4em); } .min._5 ~ .surface .b26 .outer { transform: translate3d(3em, 0em, 5em); } .min._5 ~ .surface .b27 .outer { transform: translate3d(3em, 0em, 6em); } .min._5 ~ .surface .b28 .outer { transform: translate3d(4em, 0em, 6em); } .min._7-5 ~ .surface .b18 .outer { transform: translate3d(-2em, 0em, -2em); } .min._7-5 ~ .surface .b19 .outer { transform: translate3d(-1em, 0em, -1em); } .min._7-5 ~ .surface .b20 .outer { transform: translate3d(0em, 0em, 0em); } .min._7-5 ~ .surface .b21 .outer { transform: translate3d(0em, 0em, 0em); } .min._7-5 ~ .surface .b22 .outer { transform: translate3d(0em, 0em, 0em); } .min._7-5 ~ .surface .b23 .outer { transform: translate3d(0em, 0em, 0em); } .min._7-5 ~ .surface .b24 .outer { transform: translate3d(1em, 0em, 1em); } .min._7-5 ~ .surface .b25 .outer { transform: translate3d(2em, 0em, 2em); } .min._7-5 ~ .surface .b26 .outer { transform: translate3d(3em, 0em, 3em); } .min._7-5 ~ .surface .b27 .outer { transform: translate3d(4em, 0em, 4em); } .min._7-5 ~ .surface .b28 .outer { transform: translate3d(5em, 0em, 5em); } .min._10 ~ .surface .b18 .outer { transform: translate3d(-1em, 0em, -2em); } .min._10 ~ .surface .b19 .outer { transform: translate3d(-1em, 0em, -1em); } .min._10 ~ .surface .b20 .outer { transform: translate3d(0em, 0em, 0em); } .min._10 ~ .surface .b21 .outer { transform: translate3d(0em, 0em, 0em); } .min._10 ~ .surface .b22 .outer { transform: translate3d(1em, 0em, 1em); } .min._10 ~ .surface .b23 .outer { transform: translate3d(2em, 0em, 1em); } .min._10 ~ .surface .b24 .outer { transform: translate3d(3em, 0em, 2em); } .min._10 ~ .surface .b25 .outer { transform: translate3d(4em, 0em, 2em); } .min._10 ~ .surface .b26 .outer { transform: translate3d(5em, 0em, 3em); } .min._10 ~ .surface .b27 .outer { transform: translate3d(6em, 0em, 3em); } .min._10 ~ .surface .b28 .outer { transform: translate3d(6em, 0em, 4em); } .min._12-5 ~ .surface .b18 .outer { transform: translate3d(-3em, 0em, -1em); } .min._12-5 ~ .surface .b19 .outer { transform: translate3d(-2em, 0em, -1em); } .min._12-5 ~ .surface .b20 .outer { transform: translate3d(-1em, 0em, 0em); } .min._12-5 ~ .surface .b21 .outer { transform: translate3d(0em, 0em, 0em); } .min._12-5 ~ .surface .b22 .outer { transform: translate3d(1em, 0em, 0em); } .min._12-5 ~ .surface .b23 .outer { transform: translate3d(2em, 0em, 1em); } .min._12-5 ~ .surface .b24 .outer { transform: translate3d(3em, 0em, 1em); } .min._12-5 ~ .surface .b25 .outer { transform: translate3d(4em, 0em, 1em); } .min._12-5 ~ .surface .b26 .outer { transform: translate3d(5em, 0em, 1em); } .min._12-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0