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