css实现三维旋转立体数字球动画效果-html代码-BFW代码库

css实现三维旋转立体数字球动画效果

代码语言：html

所属分类：动画

代码描述：css实现三维旋转立体数字球动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
<style>
@keyframes tumble { 
  0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); }
  100% { transform: rotateY(360deg) rotateX(360deg)  rotateZ(360deg); }
}

@keyframes spin { 
  0% { transform: perspective(800px) rotateY(0deg); }
  100% { transform: perspective(800px) rotateY(360deg); }
}

body {
  background-color: #000;
  font-family: sans-serif;
  color: #fff;
}
#dice {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  animation: spin 10s infinite linear;
  transform: perspective(800px);
}
#d4-wrap {
  transform-style: preserve-3d;
  transform: translateX(346.41px) translateZ(200px);
}
#d6-wrap {
  transform-style: preserve-3d;
  transform: translateX(-346.41px) translateZ(200px);
}
#d8-wrap {
  transform-style: preserve-3d;
  transform: translateX(-346.41px) translateZ(-200px);
}
#d10-wrap {
  transform-style: preserve-3d;
  transform: translateZ(400px);
}
#d12-wrap {
  transform-style: preserve-3d;
  transform: translateZ(-400px);
}
#d20-wrap {
  transform-style: preserve-3d;
  transform: translateX(346.41px) translateZ(-200px);
}
#d4,
#d6,
#d8,
#d10,
#d12,
#d20 {
  transform-style: preserve-3d;
  animation: tumble 8s infinite linear;
}
.d4 {
  --width: 60px;
  --height: 0.8660254;
  --center: 0.288675;
  --offset: calc(var(--center)*var(--center));
  --dihedral-angle: 70.528779deg;
  --co-dihedral: calc(90deg - var(--dihedral-angle));
  --luminance: 50%;
  font-size: 1.5rem;
  width: calc(2 * var(--width));
  height: calc(2 * var(--width) * (var(--height)));
  background-color: hsla(30,100%,var(--luminance),0.4);
  position: absolute;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform-origin: 50% calc(var(--center)*(var(--width)));
  transform-style: preserve-3d;
}

.d4[data-side='1']{
  --luminance: 40%;
  transform: rotateY(120deg) rotateX(var(--co-dihedral))  translateZ(calc(var(--offset)*(var(--width))));
}
.d4[data-side='2']{
  --luminance: 50%;
  transform: rotateX(var(--co-dihedral)) translateZ(calc(var(--offset)*(var(--width))));
}
.d4[data-side='3']{
  --luminance: 60%;
  transform: rotateY(240deg) rotateX(var(--co-dihedral))  translateZ(calc(var(--offset)*(var(--width))));
}
.d4[data-side='4']{
  --luminance: 70%;
  transform:  rotateY(180deg) rotateX(270deg) translateZ(calc((1 + var(--center))*var(--width))) translateY(calc(0px - (var(--height)*(var(--width)))));
}
[data-number]::after {
  position: absolute;
  content: attr(data-number);
  bottom: 0;
  text-align: center;
  left: 0;
  right: 0;
  padding: 0.4rem 0 0.1rem;
  transform-origin: center top;
}
.d4[data-side='1'] [data-number='2']::after,
.d4[data-side='2'] [data-number='3']::after,
.d4[data-side='3'] [data-number='1']::after,
.d4[data-side='4'] [data-number='1']::after {
  transform: rotateZ(120deg);
}
.d4[data-side='1'] [data-number='3']::after,
.d4[data-side='2'] [data-number='1']::after,
.d4[data-side='3'] [data-number='2']::after,
.d4[data-side='4'] [data-number='3']::after {
  transform: rotateZ(240deg);
}
.d6 {
  --width: 50px;
  font-size: 2rem;
  width: calc(2 * var(--width));
  height: calc(2 * var(--width));
  --luminance: 50%;
  background-color: hsla(280,100%,var(--luminance),0.4);
  position: absolute;
}
.d6::after {
  position: absolute;
  content: attr(data-side);
  top: calc(50% - 0.5em);
  text-align: center;
  left: 0;
  right: 0;
}
.d6[data-side='1']{
  --luminance: 30%;
  transform: rotateY(90deg) translateZ(var(--width));
}
.d6[data-si.........完整代码请登录后点击上方下载按钮下载查看