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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0