css实现立体方灯抽屉式开关伸缩效果代码-html代码-BFW代码库

css实现立体方灯抽屉式开关伸缩效果代码

代码语言：html

代码描述：css实现立体方灯抽屉式开关伸缩效果代码

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

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

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

  
  
  
<style>
html {
	background-color: black;
}

.wrapper {
	height: 95vh;
	display: flex;
	justify-content: center;
	align-items: center;
	transform-style: preserve-3d;
}

.scene {
	width: 250px;
	height: 250px;
	transform: rotatex(65deg) rotatez(45deg);
	transform-style: preserve-3d;
}

.main-cube {
	transform-style: preserve-3d;
	position: absolute;
}

.main-cube {
	width: 250px;
	height: 250px;
}

.side {
	border: 8px solid black;
	position: absolute;
	box-sizing: border-box;
}

.main-cube__side-top {
	width: 250px;
	height: 250px;
	translate: 0px 0px 125px;
	background-color: rgb(220, 220, 220);
	transform-style: preserve-3d;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hatching {
	background-image: repeating-linear-gradient(
		90deg,
		transparent,
		transparent 15px,
		#000 10px,
		#000 20px
	);
	background-color: rgb(255, 255, 255);
}

.main-cube__side-front {
	width: 250px;
	height: 250px;
	translate: 125px 0px 0px;
	transform: rotatey(90deg);
}

.main-cube__side-left {
	width: 250px;
	height: 250px;
	translate: 0px 125px 0px;
	transform: rotatex(90deg);
}

.main-cube__inside {
	position: absolute;
}

.main-cube__inside--bottom {
	translate: 0px 30px -90px;
	transform: rotatez(90deg);
	width: 100%;
	height: calc(70% + 16px);
	background-color: rgb(255, 255, 255);
}

.rotating-light-bottom {
	opacity: 0.8;
	position: absolute;
	width: 160px;
	height: 130%;
	background-color: rgb(193, 193, 193);
	translate: 46px 150px -81px;
	background: linear-gradient(
		180deg,
		rgb(255, 255, 255) 0%,
		rgba(255, 255, 255, 0.31) 50%,
		rgba(255, 0, 0, 0) 100%
	);
}

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