div+css布局立体空房间404错误页面代码-html代码-BFW代码库

div+css布局立体空房间404错误页面代码

代码语言：html

代码描述：div+css布局立体空房间404错误页面代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
	
:root {
    --c0: #71a1ff;
    --c1: #4d85f6;
    --c2: #3b72e2;
    --c3: #336de2;
    --c4: #2151af;
    --c5: #244483;
    --c6: #103071;
    --clr: 1; /* change color from 1 to 12 */
	--hue: calc(30deg - (30deg * var(--clr))); 
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
    perspective: 1000vmin;
    font-family: 'Varela Round', Arial, Helvetica, serif;
	background: var(--c0);
}

body * {
    transform-style: preserve-3d;
}


.cuboid {
    --size: 250;
    --height: var(--size);
    --width: var(--size);
    --depth: var(--size);
    height: calc(var(--size) * 1vmin);
    width: calc(var(--size) * 1vmin);
    position: absolute;
    transform: rotateX(50d.........完整代码请登录后点击上方下载按钮下载查看