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: rotateX(90deg) translateZ(75px);
}
.cube__side--bottom {
  transform: rotateX(-90deg) translateZ(75px);
}
.cube__side--left {
  transform: rotateY(-90deg) translateZ(75px);
}
.cube__side--right {
  transform: rotateY(90deg) translateZ(75px);
}
.cube__side--front {
  transform: translateZ(75px);
}
.cube__side--back {
  transform: rotateY(180deg) translateZ(75px);
}
</style>




</head>

<body >
  <div class="cube">
	<div class="cube__side cube__side--bottom">
		<svg viewBox="25 25 50 50" aria-labelledby="smileID smileID" role="img">
			<title id="smileID">Smiley face</title>
			<path class="" fill="none" stroke="var(--strokeColor)" stroke-width="2.5" stroke-linecap="round" d="M 45 53.5 Q 50 57.5 55 53.5" />
			<ellipse class="" cx="40" cy="50" fill="var(--strokeColor)" stroke-width="0" rx="2.75" ry="2.75" />
			<ellipse class="" cx="60" cy="50" fill="var(--strokeColor)" stroke-width="0" rx="2.75" ry="2.75" />
		</svg>
	</div>
	<div class="cube__side cube__side--left">
		<svg viewBox="25 25 50 50" aria-labelledby="frownID frownID" role="img">
			<title id="frownID">Sad face</title>
			<path class="" fill="none" stroke="var(--strokeColor)" stroke-width="2.5" stroke-linecap="round" d="M 45 54.5 Q 50 49.5 55 54.5" />
			<ellipse class="" cx="40" cy="50" fill="var(--strokeColor)" stroke-width="0" rx="2.75" ry="2.75" />
			<.........完整代码请登录后点击上方下载按钮下载查看