纯css实现3d 打开光盘盒子动画特效-html代码-BFW代码库

纯css实现3d 打开光盘盒子动画特效

代码语言：html

所属分类：三维

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> Only CSS: Compact Disc &quot;Hover Me&quot;</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'>
<style>
      body {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: 'Anton', sans-serif;
  justify-content: center;
  align-items: center;
  -webkit-perspective: 600px;
          perspective: 600px;
}

:root {
  --case-size: 200px;
  --case-depth: 20px;
  --disc-color-r: 30;
  --disc-color-g: 150;
  --disc-color-b: 140;
}

div {
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.camera.o-x {
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
}
.camera.o-y {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-animation: rotateY 20s linear infinite;
          animation: rotateY 20s linear infinite;
}
.camera.o-z {
  -webkit-transform: rotateZ(-135deg);
          transform: rotateZ(-135deg);
}

.disc {
  top: calc(var(--case-size) / -2);
  left: calc(var(--case-size) / -2);
  transition: 1s;
}
.disc:hover {
  -webkit-transform: rotateX(-60deg);
          transform: rotateX(-60deg);
}
.disc:hover .disc_case_cover {
  -webkit-transform: rotateX(120deg);
          t.........完整代码请登录后点击上方下载按钮下载查看