css实现游戏box代码-html代码-BFW代码库

css实现游戏box代码

代码语言：html

代码描述：css实现游戏box代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: Helvetica;
  background: #FEFEFE;
  user-select: none;
}

:root {
  --box-width: 175px;
  --box-height: calc(var(--box-width) * 1.37);
  --box-depth: 50px;
  --box-rotate-x: -5deg;
  --box-rotate-y: 30deg;
  --box-face-rotate: 0deg;
  --box-spine-rotate: 90deg;
  --box-background: #1E1E1E;
  --box-foreground: #47B0FF;
  --box-outline: 15px;
  --box-text: 15deg;
  --box-logo: #861C1F;
}

section {
  transform-style: preserve-3d;
  display: flex;
  justify-content: flex-start;
  perspective: calc(var(--box-width) + var(--box-height));
  width: var(--box-width);
  height: var(--box-height);
}

box {
  transform-style: preserve-3d;
  transform: rotateX(var(--box-rotate-x)) rotateY(var(--box-rotate-y)) rotateZ(0) translate3d(0px, 0px, var(--box-depth));
}

face, spine {
  position: absolute;
  margin: 0;
  padding: 0;
  transform-origin: left;
}

face {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: var(--box-width);
  height: var(--box-height);
  transform: rotateY(var(--box-face-rotate));
  background: linear-gradient(165deg, var(--box-foreground) 50%, transparent 50%), var(--box-background);
  outline: var(--box-background);
  outline-width: var(--box-outline);
  outline-offset: calc(var(--box-outline) * -1);
  outline-style: solid;
}

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