gsap实现一个旋转交互的心情骰子三维效果代码-html代码-BFW代码库

gsap实现一个旋转交互的心情骰子三维效果代码

代码语言：html

所属分类：三维

代码描述：gsap实现一个旋转交互的心情骰子三维效果代码

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


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

<head>

  <meta charset="UTF-8">
  


  
<style>
:root {
  --baseColor: #341f97;
  --contrastColor: #c8d6e5;
  --strokeColor: #222f3e;
}

body {
  background-color: var(--baseColor);
}

.cube {
  height: 150px;
  transform-style: preserve-3d;
  width: 150px;
  position: absolute;
  top: calc(50% - 75px);
  left: calc(50% - 75px);
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  transform: rotate3d(1, 1, 0, 45deg);
}
.cube__side {
  height: 100%;
  position: absolute;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.cube__side:after {
  content: "";
  right: 0;
  border-radius: 10%;
  bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--contrastColor);
  transform: scale(0.9);
  z-index: -1;
}
.cube__side--top {
  transform:.........完整代码请登录后点击上方下载按钮下载查看