css实现三维书架拿书打开交互动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现三维书架拿书打开交互动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Hind'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lora'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro'>
  
<style>
/* Block placement */
:root {
  font-size: 20px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, input {
  font-family: "Hind", sans-serif;
  font-size: 1em;
}

body {
  background-color: #ccc;
  height: 100vh;
  margin: 0;
}

input {
  position: absolute;
}

input[type=radio] {
  top: -20px;
  left: -20px;
}
input[type=radio]:checked ~ input[type=reset] {
  visibility: visible;
}

input[type=reset] {
  background-color: #c22;
  border: 0;
  border-radius: 0;
  color: #fff;
  padding: 0.5em 0.75em;
  bottom: 5%;
  left: 50%;
  visibility: hidden;
  transform: translateX(-50%);
  transition: background-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
input[type=reset]:hover, input[type=reset]:focus {
  background-color: #ee4444;
}
input[type=reset]:active {
  background-color: #aa0000;
}

.container {
  animation: fadeIn 0.25s 0.25s linear forwards;
  display: flex;
  margin: auto;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: 800px;
  transform-style: preserve-3d;
}

.surface {
  display: block;
  width: 384px;
  height: 224px;
  margin: auto;
  transform-style: preserve-3d;
  transform: translateY(152px) rotateX(80deg) rotateZ(0deg);
  transition: transform 0.25s;
  will-change: transform;
}

.block {
  display: none;
  transform-style: preserve-3d;
  position: absolute;
  bottom: 0;
}

.block-inner div {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  position: absolute;
  width: 16px;
  height: 16px;
}

.block-inner {
  position: relative;
  width: 16px;
  transition: transform 0.25s linear;
  transform-style: preserve-3d;
  transform: rotateX(-90deg) translateZ(16px);
}

.back {
  transform: translateZ(-16px) rotateY(180deg);
}

.left {
  transform-origin: center left;
  transform: rotateY(270deg) translateX(-16px);
}

.right {
  transform-origin: top right;
}
.right::after, .right div {
  top: 0;
  left: 0;
  transform-origin: 0 50%;
  transition: transform 0.25s 0.25s linear;
}
.right::after {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  color: #fff;
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  padding: 20% 5%;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.right div {
  width: 100%;
  height: 100%;
}

.top, .bottom {
  transform-origin: top center;
}

.spine, .right::after, .contents h1 {
  font-family: "Lora", serif;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}

.spine {
  background: transparent;
  color: #ccc;
  font-size: 12px;
  line-height: 12px;
  top: 0;
  left: 0;
  transform: rotate(90deg) translate(12px, -50%);
  white-space: nowrap;
  width: 0;
  height: 16px;
}

.cover {
  background-color: #fff;
  z-index: 1;
}

.contents {
  font-size: 11.2px;
  padding: 16px;
}
.contents h1 {
  font-size: 2em;
}
.contents p {
  font-family: "Source Sans Pro", serif;
}

.b1 {
  display: block;
  transform: translate3d(16px, -224px, 16px);
}
.b1 .block-inner > div {
  background-color: #441e12;
}
.b1 .block-inner > div.top, .b1 .block-inner > div.bottom {
  width: 352px;
  height: 224px;
}
.b1 .block-inner > div.top {
  transform: rotateX(-90deg) translateY(-208px);
}
.b1 .block-inner > div.bottom {
  transform: rotateX(-90deg) translateY(-208px) translateZ(16px);
}
.b1 .block-inner > div.front::before, .b1 .block-inner > div.back::before, .b1 .block-inner > div.left::before, .b1 .block-inner > div.right::before {
  background-color: #000;
  content: "";
  width: 100%;
  height: 100%;
}
.b1 .block-inner > div.front, .b1 .block-inner > div.back {
  width: 352px;
  height: 16px;
}
.b1 .block-inner > div.front::before, .b1 .block-inner > div.back::before {
  opacity: 0.2;
}
.b1 .block-inner > div.front {
  transform: translateZ(208px);
}
.b1 .block-inner > div.left, .b1 .block-inner > div.right {
  width: 224px;
  height: 16px;
}
.b1 .block-inner > div.left::before, .b1 .block-inner > div.right::before {
  opacity: 0.4;
}
.b1 .block-inner > div.right {
  transform: rotateY(-270deg) translate3d(16px, 0, 128px);
  transform-style: preserve-3d;
}

.b2 {
  display: block;
  transform: translate3d(0px, -224px, 288px);
}
.b2 .block-inner > div {
  background-color: #441e12;
}
.b2 .block-inner > div.top, .b2 .block-inner > div.bottom {
  width: 384px;
  height: 16px;
}
.b2 .block-inner > div.top {
  transform: rotateX(-90deg) translateY(0px);
}
.b2 .block-inner > div.bottom {
  transform: rotateX(-90deg) translateY(0px) translateZ(288px);
}
.b2 .block-inner > div.front::before, .b2 .block-inner > div.back::before, .b2 .block-inner > div.left::before, .b2 .block-inner > div.right::before {
  background-color: #000;
  content: "";
  width: 100%;
  height: 100%;
}
.b2 .block-inner > div.front, .b2 .block-inner > div.back {
  width: 384px;
  height: 288px;
}
.b2 .block-inner > div.front::before, .b2 .block-inner > div.back::before {
  opacity: 0.2;
}
.b2 .block-inner > div.front {
  transform: translateZ(0px);
}
.b2 .block-inner > div.left, .b2 .block-inner > div.right {
  width: 16px;
  height: 288px;
}
.b2 .block-inner > div.left::before, .b2 .block-inner > div.right::before {
  opacity: 0.4;
}
.b2 .block-inner > div.right {
  transform: rotateY(-270deg) translate3d(16px, 0, 368px);
  transform-style: preserve-3d;
}

.b3 {
  display: block;
  transform: translate3d(0px, -208px, 288px);
}
.b3 .block-inner > div {
  background-color: #441e12;
}
.b3 .block-inner > div.top, .b3 .block-inner > div.bottom {
  width: 16px;
  height: 208px;
}
.b3 .block-inner > div.top {
  transform: rotateX(-90deg) translateY(-192px);
}
.b3 .block-inner > div.bottom {
  transform: rotateX(-90deg) translateY(-192px) translateZ(288px);
}
.b3 .block-inner > div.front::before, .b3 .block-inner > div.back::before, .b3 .block-inner > div.left::before, .b3 .block-inner > div.right::before {
  background-color: #000;
  content: "";
  width: 100%;
  height: 100%;
}
.b3 .block-inner > div.front, .b3 .block-inner > div.back {
  width: 16px;
  height: 288px;
}
.b3 .block-inner > div.front::before, .b3 .block-inner > div.back::before {
  opacity: 0.2;
}
.b3 .block-inner > div.front {
  transform: translateZ(192px);
}
.b3 .block-inner > div.left, .b3 .block-inner > div.right {
  width: 208px;
  height: 288px;
}
.b3 .block-inner > div.left::before, .b3 .block-inner > div.right::before {
  opacity: 0.4;
}
.b3 .block-inner > div.right {
  transform: rotateY(-270deg) translate3d(16px, 0, -192px);
  transform-style: preserve-3d;
}

.b4 {
  display: block;
  transform: translate3d(368px, -208px, 288px);
}
.b4 .block-inner > div {
  background-color: #441e12;
}
.b4 .block-inner > div.top, .b4 .block-inner > div.bottom {
  width: 16px;
  height: 208px;
}
.b4 .block-inner > div.top {
  transform: rotateX(-90deg) translateY(-192px);
}
.b4 .block-inner > div.bottom {
  transform: rotateX(-90deg) translateY(-192px) translateZ(288px);
}
.b4 .block-inner > div.front::before, .b4 .block-inner > div.back::before, .b4 .block-inner > div.left::before, .b4 .block-inner > div.right::before {
  background-color: #000;
  content: "";
  width: 100%;
  height: 100%;
}
.b4 .block-inner > div.front, .b4 .block-inner > div.back {
  width: 16px;
  height: 288px;
}
.b4 .block-inner > div.front::before, .b4 .block-inner > div.back::before {
  opacity: 0.2;
}
.b4 .block-inner > div.front {
  transform: translateZ(192px);
}
.b4 .block-inner > div.left, .b4 .block-inner > div.right {
  width: 208px;
  height: 288px;
}
.b4 .block-inner > div.left::before, .b4 .block-inner > div.right::before {
  opacity: 0.4;
}
.b4 .block-inner > div.right {
  transform: rotateY(-270deg) translate3d(16px, 0, -192px);
  transform-style: preserve-3d;
}

.........完整代码请登录后点击上方下载按钮下载查看