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(50deg) rotate(45deg);
    pointer-events: none;
}

.cuboid .side {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	border-radius: 2px;
    box-shadow: 0vmin 0vmin 0.5vmin 0 var(--c0) inset, 0 0 5vmin 0 var(--c0);
}

.cuboid .side:nth-of-type(1) {
	transform: translate3d(-50%, -50%, calc(var(--size) * -0.5vmin)) rotateY(180deg);
	background: radial-gradient(circle at 100% 0%, var(--c4), #fff0 45vmin),radial-gradient(circle at 100% 0%, var(--c1), var(--c4));
}
 
.cuboid .side:nth-of-type(2) {
	width: calc(var(--size) * 1vmin);
	transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--size) * 0.5vmin));
	background: radial-gradient(circle at 0% 0.........完整代码请登录后点击上方下载按钮下载查看