css实现三维骰子排列显示当前时间时钟效果代码
代码语言：html
所属分类：其他
代码描述：css实现三维骰子排列显示当前时间时钟效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap');
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
transform-style: preserve-3d;
}
body {
min-height: 100vh;
overflow: hidden;
display: grid;
place-items: center;
background-color: black;
perspective: 1000px;
font-family: 'Major Mono Display', monospace;
}
.clock-container {
display: grid;
grid-template-columns: repeat(8,max-content);
grid-template-rows: repeat(2,max-content);
gap: 4vmin;
}
/* geometry */
/* cube */
[cube] {
--s: var(--size, 1rem);
width: var(--s);
height: var(--s);
display: grid;
grid-template: "center";
place-items: center;
outline: 2px solid transparent;
}
/* cube planes */
[cube-plane] {
grid-area: center;
width: 100%;
height: 100%;
transform:
translateX(var(--pl-tx, 0px)) translateY(var(--pl-ty, 0px)) translatez(var(--pl-tz, 0px))
rotateX(var(--pl-rx, 0deg)) rotateY(var(--pl-ry, 0deg)) rotateZ(var(--pl-rz, 0deg));
--half-neg: calc(var(--s) / -2 + 0.1px);
--half_pos: calc(var(--s) / 2 - 0.1px);
}
[cube-plane="front"] { --pl-tz: var(--half_pos); }
[cube-plane="back"] { --pl-tz: var(--half-neg); }
[cube-plane="left"] { --pl-tx: var(--half_pos); --pl-ry: 90deg; }
[cube-plane="right"] { --pl-tx: var(--half-neg); --pl-ry: 90deg; }
[cube-plane="bottom"] { --pl-ty: var(--half_pos); --pl-rx: 90deg; }
[cube-plane="top"] { --pl-ty: var(--half-neg); --pl-rx: 90deg; }
/* styling */
.die { --size: 10vmin }
.colon { --size: 3vmin }
.colon.c1t, .colon.c2t { align-self: end ; }
.colon.c1b, .colon.c2b { align-self: start; }
/* planes */
.colon [cube-plane] {
background: rgba(50,50,50);
}
.die [cube-plane] {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
padding: 20%;
gap: 10%;
background: rgba(25,25,25);
}
/* numbers */
.die i {
background: var(--dotColor, grey);
border-radius: 50%;
grid-row: var(--gr);
grid-column: var(--gc);
}
.die i.tl { --gr: 1; --gc: 1; }
.die i.tc { --gr: 1; --gc: 2; }
.die i.tr { --gr: 1; --gc: 3; }
.die i.cl { --gr: 2; --gc: 1; }
.die i.cc { --gr: 2; --gc: 2; }
.die i.cr { --gr: 2; --gc: 3; }
.die i.bl { --gr: 3; --gc: 1; }
.die i.bc { --gr: 3; --gc: 2; }
.die i.br { --gr: 3; --gc: 3; }
/* die rotation */
.die {
transform: rotateX(var(--rotateX,0deg)) rotateY(var(--rotateY, 0deg)) rotateZ(var(--rotateZ, 0deg));
transition: transform 0.25s ease
}
/* .die[data-nr="1"]{ } */
.die[data-nr="2"] { --rotateX: -90deg } .die[data-nr="3"] { --rotateY: -90deg }
.die[data-nr="4"] { --rotateY: 90deg } .die[data-nr="5"] { --rotateX: 90deg }
.die[data-nr="6"] { --rotateX: 180deg } .die[data-nr="0"] { --rotateY: 180deg }
.die[data-nr="0"] i { opacity: 0 }
/* highlight front face*/
.die[data-nr="1"] .nr1, .die[data-nr="2"] .nr2, .die[data-nr="3"] .nr3, .die[data-nr="4"] .nr4,
.die[data-nr="5"] .nr5, .die[data-nr="6"] .nr6, .die[data-nr="0"] .nr6, .colon [cube-plane="front"]{
--dotColor: white;
background-image: linear-gradient(rgba(255,255,255,0.1),rgba(255,255,255,0.1));
}
/* time */
.title, .time{
color: white;
font-size: 5vmin;
bottom: 3rem
}
.title { align-self: end;}
.time { align-self: start;}
/* zoom and rotation*/
.clock-container{
transform:
translateZ(calc(var(--clock-tz,0) * 1px))
rotateX(calc(var(--clock-rx,0) * 1deg))
rotateY(calc(var(--clock-ry,0) * 1deg));
}
.clock-container.smooth-leave{
transition: transform 0.25s linear;
}
</style>
</head>
<body>
<div class="title">3d dice clock</div>
<div class="clock-container">
<div cube class="die h1t" data-nr="0">
<div cube-plane="front" class="nr1">
<i class="cc"></i>
</div>
<div cube-plane="back" class="nr6">
<i class="tl"></i>
<i class="tr"></i>
<i class="cl"></i>
<i class="cr"></i>
<i class="bl"></i>
<i class="br"></i>
</div>
<div cube-plane="left" class="nr3">
<i class="tl"></i>
<i class="cc"></i>
<i class="br"></i>
</div>
<div cube-plane="right" class="nr4">
<i class="tl"></i>
<i class="tr"></i>
<i class="bl"></i>
<i class="br"></i>
</div>
<div cube-plane="bottom" class="nr5">
<i class="tl"></i>
<i class="tr"></i>
<i class="cc"></i>
<i class="bl"></i>
<i class="br"></i>
</div>
<div cube-plane="top" class="nr2">
<i class="tl"></i>
<i class="br"></i>
</div>
</div>
<div cube class="die h2t" data-nr="0">
<div cube-plane="front" class="nr1">
<i class="cc"></i>
</div>
<div cube-plane="back" class="nr6">
<i class="tl"></i>
<i class="tr"></i>
<i class="cl"></i>
<i class="cr"></i>
<i class="bl"></i>
<i class="br"></i>
</div>
<div cube-plane="left" class="nr3">
<i class="tl"></i>
<i class="cc"></i>
<i class="br"></i>
</div>
<div cube-plane="right" class="nr4">
<i class="tl"></i>
<i class="tr"></i>
<i class="bl"></i>
<i class="br"></i>
</div>
<div cube-plane="bottom" class="nr5">
<i class="tl"></i>
<i class="tr"></i>
<i class="cc"></i>
<i class="bl"></i>
<i class="br"></i>
</div>
<div cube-plane="top" class="nr2">
<i class="tl"></i>
<i class="br"></i>
</div>
</div>
<div cube class="colon c1t">
<div cube-plane="front"></div>
<div cube-plane="back"></div>
<div cube-plane="left"></div>
<div cube-plane="right"></div>
<div cube-plane="bottom"></div>
<div cube-plane="top"></div>
</div>
<div cube class="die m1t" data-nr="0">
<div cube-plane="front" class="nr1">
<i class="cc"></i>
</div>
<div cube-plane="back" class="nr6">
<i class="tl"></i>
<i class="tr"></i>
<i class="cl"></i>
<i class="cr"></i>
<i class="bl"></i>
<i class="br"></i>
</div>
<div cube-plane="left" class="nr3">
<i class="tl"></i>
<i class="cc"></i>
<i class="br"></i>
</div>
<div cube-plane="right" class="nr4">
<i class="tl"></i>
<i class="tr"></i>
<i class="bl"></i>
<i class="br"></i>
</div>
<div cube-plane="bottom" class="nr5">
<i class="tl"></i>
<i class="tr"></i>
<i class="cc"></i>
<i class="bl"></i>
<i class="br"></i>
</div>
<div cube-plane="top" class="nr2">
<i class="tl"></i>
<i class="br"></i>
</div>
</div>
<div cube class="die m2t" data-nr="0">
<div cube-plane="front" class="nr1">
<i class="cc"></i>
</div>
<div cube-plane="back" class="nr6">
<i class="tl"></i>
<i class="tr"></i>
<i class="cl"></i>
<i class="cr"></i>
<i class="bl"></i>
<i class="br"></i>
</div>
<div cube-plane="left" class="nr3">
<i class="tl"></i>
<i class="cc"></i>
<i class="br"></i>
</div>
<div cube-plane="right" class="nr4">
<i class="tl"></i>
<i class="tr"></i>
<i class="bl"></i>
<i class="br"></i>
</div>
<div cube-plane="bottom" class="nr5">
<i class="tl"></i>
<i class="tr"></i>
<i class="cc"></i>
<i class="bl"></i>
<i class="br"></i>
</div>
<div cube-plane="top" class="nr2">
<i class="tl"></i>
<i class="br"></i>
</div>
</div>
<div cube class="colon c2t">
<div cube-plane="front"></div>
<div cube-plane="back"></div>
<div cube-plane="left"></div>
<div cube-plane="right"></div>
<div cube-plane="bottom"></div>
<div cube-plane="top"></div>
</div>
<div cube class="die s1t" data-nr="0">
<div cube-plane="front" class="nr1">
<i class="cc"></i>
</div>
<div cube-plane="back" class="nr6">
<i class="tl"></i>
<i class="tr"></i>
<i class="cl"></i>
<i class="cr"></i>
<i class="bl"></i>
<i class="br"></i>
</div>
<div cube-plane="left" class="nr3">
<i class="tl"></i>
<i class="cc"></i>
<i class="br"></i>
</div>
<div cube-plane="right" class="nr4">
<i class="tl"></i>
<i class="tr"></i>
<i class="bl"></i>
<i class="br"></i>
</div>
<div cube-plane="bottom" class="nr5">
<i class="tl"></i>
<i class="tr"></i>
<i class="cc"></i>
<i class="bl"></i>
<i class="br"></i>
</div>
<div cube-plane="top" class="nr2">
<i class="tl"></i>
<i class="br"></i>
</div>
</div>
<div cube class="die s2t" data-nr="0">
<div cube-plane="front" class="nr1">
<i class="cc"></i>
</div>
<div cube-plane="back" class="nr6">
<i class="tl"></i>
<i class="tr"></i>
<i class="cl"></i>
<i class="cr"></i>
<i class="bl"></i>
<i class="br"></i>
</div>
<div cube-plane="left" class="nr3">
<i class="tl"></i>
<i class="cc"></i>
<i class="br"></i>
</div>
<div cube-plane="right" class="nr4">
<i class="tl"></i>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0