css神奇宝贝书本打开动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css神奇宝贝书本打开动画效果代码

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

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

<head>

  <meta charset="UTF-8">

  
<style>

/**/
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}

/* Generic */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #3647bd;
  font-family: "Press Start 2P", cursive;
}

a {
  cursor: pointer;
  text-decoration: none;
}

.face {
  position: absolute;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

/***********************/
/* Pokedex ( Contenedor principal)*/
/***********************/
.pokedex {
  position: absolute;
  width: 46vmax;
  height: 36vmax;
  transform: perspective(10000px) rotateX(55deg) rotateZ(25deg) translateZ(-5vw);
  transition: transform 0.2s;
}
.pokedex::before {
  content: "Pokedex";
  position: absolute;
  bottom: 2vmax;
  right: 0;
  font-size: 2vmax;
  color: #DEDEDE;
}

.shadows {
  position: absolute;
  top: 0;
  right: 0;
  width: 47vmax;
  height: 37vmax;
  overflow: hidden;
  transform: translateZ(-0.65vmax);
}

.shadow-1 {
  position: absolute;
  width: 25vmax;
  height: 100%;
  left: 0;
  bottom: 0;
  background-color: #1f296e;
}

.shadow-2 {
  position: absolute;
  width: 24vmax;
  height: 28vmax;
  background-color: #1f296e;
  right: 0;
  bottom: 0;
  transition: right 2s;
}

/***********************/
/* Parte izquierda pokedex (Objetos independiente) */
/***********************/
.al1 {
  position: absolute;
  width: 23vmax;
  height: 36vmax;
  bottom: 0;
  left: 0;
}
.al1__front {
  width: 23vmax;
  height: 1.25vmax;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(34.75vmax);
}
.al1__back {
  width: 23vmax;
  height: 1.25vmax;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-23vmax) translateY(-1.25vmax);
}
.al1__right {
  width: 36vmax;
  height: 1.25vmax;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(23vmax) translateX(-36vmax) translateY(-1.25vmax);
}
.al1__left {
  width: 36vmax;
  height: 1.25vmax;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.25vmax);
}
.al1__top {
  width: 23vmax;
  height: 36vmax;
  transform-origin: top left;
  transform: translateZ(1.25vmax);
}
.al1__bottom {
  width: 23vmax;
  height: 36vmax;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-23vmax);
}
.al1__front {
  background-color: #7a0619;
}
.al1__back {
  background-color: #ab0823;
}
.al1__right {
  background-color: #ab0823;
}
.al1__left {
  background-color: #7a0619;
}
.al1__top {
  background-color: #DC0A2D;
}
.al1__bottom {
  background-color: #7a0619;
}
.al1__right {
  background-color: #93071e;
}

.al2 {
  position: absolute;
  width: 23vmax;
  height: 4vmax;
  top: 0;
  left: 0;
}
.al2__front {
  width: 23vmax;
  height: 2.2vmax;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(1.8vmax);
}
.al2__back {
  width: 23vmax;
  height: 2.2vmax;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-23vmax) translateY(-2.2vmax);
}
.al2__right {
  width: 4vmax;
  height: 2.2vmax;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(23vmax) translateX(-4vmax) translateY(-2.2vmax);
}
.al2__left {
  width: 4vmax;
  height: 2.2vmax;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-2.2vmax);
}
.al2__top {
  width: 23vmax;
  height: 4vmax;
  transform-origin: top left;
  transform: translateZ(2.2vmax);
}
.al2__bottom {
  width: 23vmax;
  height: 4vmax;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-23vmax);
}
.al2__front {
  background-color: #7a0619;
}
.al2__back {
  background-color: #ab0823;
}
.al2__right {
  background-color: #ab0823;
}
.al2__left {
  background-color: #7a0619;
}
.al2__top {
  background-color: #DC0A2D;
}
.al2__bottom {
  background-color: #7a0619;
}

.al3 {
  position: absolute;
  width: 13.75vmax;
  height: 5vmax;
  top: 4vmax;
  left: 0;
  transform: translateZ(1.26vmax);
}
.al3__front {
  width: 13.75vmax;
  height: 0.95vmax;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(4.05vmax);
}
.al3__back {
  width: 13.75vmax;
  height: 0.95vmax;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-13.75vmax) translateY(-0.95vmax);
}
.al3__right {
  width: 5vmax;
  height: 0.95vmax;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(13.75vmax) translateX(-5vmax) translateY(-0.95vmax);
}
.al3__left {
  width: 5vmax;
  height: 0.95vmax;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.95vmax);
}
.al3__top {
  width: 13.75vmax;
  height: 5vmax;
  transform-origin: top left;
  transform: translateZ(0.95vmax);
}
.al3__bottom {
  width: 13.75vmax;
  height: 5vmax;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-13.75vmax);
}
.al3__top {
  background-image: linear-gradient(-65deg, transparent 2.1vmax, #DC0A2D 2.1vmax);
}
.al3__bottom {
  background-image: linear-gradient(65deg, transparent 2.1vmax, #7a0619 2.1vmax);
}
.al3__front {
  background-image: linear-gradient(to right, #7a0619 11.5vmax, transparent 11.5vmax);
}
.al3__back {
  background-color: #7a0619;
}
.al3__left {
  background-color: #ab0823;
}
.al3__right::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 5.6vmax;
  height: 100%;
  background-color: #ab0823;
  transform-origin: top right;
  transform: rotateY(-25deg);
}

/***********************/
/* Contenido izquierda */
/***********************/
.screen-left {
  position: absolute;
  top: 11vmax;
  left: 2.5vmax;
  width: 16vmax;
  height: 13.5vmax;
  transform: translateZ(1.25vmax);
  box-shadow: 0.35vmax 0.35vmax 0.35vmax rgba(34, 34, 34, 0.35);
}
.screen-left__front {
  width: 16vmax;
  height: 0.25vmax;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(13.25vmax);
}
.screen-left__back {
  width: 16vmax;
  height: 0.25vmax;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-16vmax) translateY(-0.25vmax);
}
.screen-left__right {
  width: 13.5vmax;
  height: 0.25vmax;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(16vmax) translateX(-13.5vmax) translateY(-0.25vmax);
}
.screen-left__left {
  width: 13.5vmax;
  height: 0.25vmax;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.25vmax);
}
.screen-left__top {
  width: 16vmax;
  height: 13.5vmax;
  transform-origin: top left;
  transform: translateZ(0.25vmax);
}
.screen-left__bottom {
  width: 16vmax;
  height: 13.5vmax;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-16vmax);
}
.screen-left__front {
  background-color: black;
}
.screen-left__back {
  background-color: #090909;
}
.screen-left__right {
  background-color: #090909;
}
.screen-left__left {
  background-color: black;
}
.screen-left__top {
  background-color: #222222;
}
.screen-left__bottom {
  background-color: black;
}
.screen-left__top {
  background-color: #DEDEDE;
  display: flex;
  justify-content: center;
  align-items: center;
}
.screen-left__top::before {
  content: "";
  position: absolute;
  width: 13vmax;
  height: 10.5vmax;
  background-color: black.........完整代码请登录后点击上方下载按钮下载查看