css实现挂上画的360度三维vr房间交互效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：css实现挂上画的360度三维vr房间交互效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
   
<style>
img {
	width:100%;
	position:static
}
.pointer {
	cursor:pointer
}
input {
	display:none
}
html {
	font-size:.5vw;
	width:100%;
	height:100%;
	font-family:"Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif
}
body {
	perspective:50rem;
	overflow:hidden;
	width:100%;
	height:100%;
	margin:0;
	background:#000;
	display:flex;
	flex-wrap:wrap
}
body *,body *:before,body *:after {
	transform-style:preserve-3d;
	box-sizing:border-box;
	position:absolute;
	content:"";
	left:0;
	top:0;
	outline:0
}
#wall4:checked ~ label:not([for=lightswitch]) {
	width:calc(100% / 13);
	height:calc(100% / 3);
	position:relative;
	z-index:1;
	border:0;
	background:0;
	padding:0;
	margin:0;
	display:inline
}
#wall4:checked ~ label:not([for=lightswitch]) label,#wall4:checked ~ label:not([for=lightswitch]) a {
	display:block;
	width:100%;
	height:100%;
	transition:.1s .5s linear
}
#wall4:checked ~ label:nth-of-type(1):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(1):focus ~ z>x>y {
	transform:rotateY(-240deg)
}
#wall4:checked ~ label:nth-of-type(1):hover ~ z>x,#wall4:checked ~ label:nth-of-type(1):focus ~ z>x {
	transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(2):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(2):focus ~ z>x>y {
	transform:rotateY(-230deg)
}
#wall4:checked ~ label:nth-of-type(2):hover ~ z>x,#wall4:checked ~ label:nth-of-type(2):focus ~ z>x {
	transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(3):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(3):focus ~ z>x>y {
	transform:rotateY(-220deg)
}
#wall4:checked ~ label:nth-of-type(3):hover ~ z>x,#wall4:checked ~ label:nth-of-type(3):focus ~ z>x {
	transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(4):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(4):focus ~ z>x>y {
	transform:rotateY(-210deg)
}
#wall4:checked ~ label:nth-of-type(4):hover ~ z>x,#wall4:checked ~ label:nth-of-type(4):focus ~ z>x {
	transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(5):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(5):focus ~ z>x>y {
	transform:rotateY(-200deg)
}
#wall4:checked ~ label:nth-of-type(5):hover ~ z>x,#wall4:checked ~ label:nth-of-type(5):focus ~ z>x {
	transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(6):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(6):focus ~ z>x>y {
	transform:rotateY(-190deg)
}
#wall4:checked ~ label:nth-of-type(6):hover ~ z>x,#wall4:checked ~ label:nth-of-type(6):focus ~ z>x {
	transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(7):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(7):focus ~ z>x>y {
	transform:rotateY(-180deg)
}
#wall4:checked ~ label:nth-of-type(7):hover ~ z>x,#wall4:checked ~ label:nth-of-type(7):focus ~ z>x {
	transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(8):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(8):focus ~ z>x>y {
	transform:rotateY(-170deg)
}
#wall4:checked ~ label:nth-of-type(8):hover ~ z>x,#wall4:checked ~ label:nth-of-type(8):focus ~ z>x {
	transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(9):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(9):focus ~ z>x>y {
	transform:rotateY(-160deg)
}
#wall4:checked ~ label:nth-of-type(9):hover ~ z>x,#wall4:checked ~ label:nth-of-type(9):focus ~ z>x {
	transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(10):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(10):focus ~ z>x>y {
	transform:rotateY(-150deg)
}
#wall4:checked ~ label:nth-of-type(10):hover ~ z>x,#wall4:checked ~ label:nth-of-type(10):focus ~ z>x {
	transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(11):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(11):focus ~ z>x>y {
	transform:rotateY(-140deg)
}
#wall4:checked ~ label:nth-of-type(11):hover ~ z>x,#wall4:checked ~ label:nth-of-type(11):focus ~ z>x {
	transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(12):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(12):focus ~ z>x>y {
	transform:rotateY(-130deg)
}
#wall4:checked ~ label:nth-of-type(12):hover ~ z>x,#wall4:checked ~ label:nth-of-type(12):focus ~ z>x {
	transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(13):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(13):focus ~ z>x>y {
	transform:rotateY(-120deg)
}
#wall4:checked ~ label:nth-of-type(13):hover ~ z>x,#wall4:checked ~ label:nth-of-type(13):focus ~ z>x {
	transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(14):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(14):focus ~ z>x>y {
	transform:rotateY(-240deg)
}
#wall4:checked ~ label:nth-of-type(15):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(15):focus ~ z>x>y {
	transform:rotateY(-230deg)
}
#wall4:checked ~ label:nth-of-type(16):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(16):focus ~ z>x>y {
	transform:rotateY(-220deg)
}
#wall4:checked ~ label:nth-of-type(17):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(17):focus ~ z>x>y {
	transform:rotateY(-210deg)
}
#wall4:checked ~ label:nth-of-type(18):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(18):focus ~ z>x>y {
	transform:rotateY(-200deg)
}
#wall4:checked ~ label:nth-of-type(19):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(19):focus ~ z>x>y {
	transform:rotateY(-190deg)
}
#wall4:checked ~ label:nth-of-type(20):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(20):focus ~ z>x>y {
	transform:rotateY(-180deg)
}
#wall4:checked ~ label:nth-of-type(21):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(21):focus ~ z>x>y {
	transform:rotateY(-170deg)
}
#wall4:checked ~ label:nth-of-type(22):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(22):focus ~ z>x>y {
	transform:rotateY(-160deg)
}
#wall4:checked ~ label:nth-of-type(23):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(23):focus ~ z>x>y {
	transform:rotateY(-150deg)
}
#wall4:checked ~ label:nth-of-type(24):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(24):focus ~ z>x>y {
	transform:rotateY(-140deg)
}
#wall4:checked ~ label:nth-of-type(25):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(25):focus ~ z>x>y {
	transform:rotateY(-130deg)
}
#wall4:checked ~ label:nth-of-type(26):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(26):focus ~ z>x>y {
	transform:rotateY(-120deg)
}
#wall4:checked ~ label:nth-of-type(27):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(27):focus ~ z>x>y {
	transform:rotateY(-240deg)
}
#wall4:checked ~ label:nth-of-type(27):hover ~ z>x,#wall4:checked ~ label:nth-of-type(27):focus ~ z>x {
	transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(28):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(28):focus ~ z>x>y {
	transform:rotateY(-230deg)
}
#wall4:checked ~ label:nth-of-type(28):hover ~ z>x,#wall4:checked ~ label:nth-of-type(28):focus ~ z>x {
	transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(29):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(29):focus ~ z>x>y {
	transform:rotateY(-220deg)
}
#wall4:checked ~ label:nth-of-type(29):hover ~ z>x,#wall4:checked ~ label:nth-of-type(29):focus ~ z>x {
	transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(30):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(30):focus ~ z>x>y {
	transform:rotateY(-210deg)
}
#wall4:checked ~ label:nth-of-type(30):hover ~ z>x,#wall4:checked ~ label:nth-of-type(30):focus ~ z>x {
	transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(31):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(31):focus ~ z>x>y {
	transform:rotateY(-200deg)
}
#wall4:checked ~ label:nth-of-type(31):hover ~ z>x,#wall4:checked ~ label:nth-of-type(31):focus ~ z>x {
	transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(32):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(32):focus ~ z>x>y {
	transform:rotateY(-190deg)
}
#wall4:checked ~ label:nth-of-type(32):hover ~ z>x,#wall4:checked ~ label:nth-of-type(32):focus ~ z>x {
	transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(33):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(33):focus ~ z>x>y {
	transform:rotateY(-180deg)
}
#wall4:checked ~ label:nth-of-type(33):hover ~ z>x,#wall4:checked ~ label:nth-of-type(33):focus ~ z>x {
	transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(34):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(34):focus ~ z>x>y {
	transform:rotateY(-170deg)
}
#wall4:checked ~ label:nth-of-type(34):hover ~ z>x,#wall4:checked ~ label:nth-of-type(34):focus ~ z>x {
	transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(35):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(35):focus ~ z>x>y {
	transform:rotateY(-160deg)
}
#wall4:checked ~ label:nth-of-type(35):hover ~ z>x,#wall4:checked ~ label:nth-of-type(35):focus ~ z>x {
	transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(36):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(36):focus ~ z>x>y {
	transform:rotateY(-150deg)
}
#wall4:checked ~ label:nth-of-type(36):hover ~ z>x,#wall4:checked ~ label:nth-of-type(36):focus ~ z>x {
	transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(37):hover ~ z>x>y,#wall4:checked ~ label.........完整代码请登录后点击上方下载按钮下载查看