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:nth-of-type(37):focus ~ z>x>y {
	transform:rotateY(-140deg)
}
#wall4:checked ~ label:nth-of-type(37):hover ~ z>x,#wall4:checked ~ label:nth-of-type(37):focus ~ z>x {
	transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(38):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(38):focus ~ z>x>y {
	transform:rotateY(-130deg)
}
#wall4:checked ~ label:nth-of-type(38):hover ~ z>x,#wall4:checked ~ label:nth-of-type(38):focus ~ z>x {
	transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(39):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(39):focus ~ z>x>y {
	transform:rotateY(-120deg)
}
#wall4:checked ~ label:nth-of-type(39):hover ~ z>x,#wall4:checked ~ label:nth-of-type(39):focus ~ z>x {
	transform:rotateX(-10deg)
}
x,y,z {
	position:absolute;
	top:-50rem;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	width:1rem;
	height:1rem;
	transition:.5s ease-in-out
}
floor,floor:before,floor:after,ceiling,ceiling:before,ceiling:after {
	width:300rem;
	height:300rem;
	box-shadow:0 0 1rem #110e12
}
floor {
	height:400rem;
	transform:rotateX(90deg) translate3d(-150rem,-50rem,0rem);
	box-shadow:0 0 1rem #110e12,inset 0 0 10rem 0 rgba(17,14,18,0.75);
	background:linear-gradient(#000,rgba(255,255,255,0),rgba(255,255,255,0)),repeating-linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0) 12rem,rgba(17,14,18,0.5) 12.5rem),radial-gradient(#d9996b,#361f0e)
}
floor:before,floor:after {
	background:radial-gradient(circle at center top,#7f95a8,#110e12)
}
floor:before {
	transform:rotateY(90deg) translate3d(-150rem,100rem,-150rem)
}
floor:after {
	transform:rotateY(-90deg) translate3d(150rem,100rem,-150rem)
}
ceiling {
	transform:rotateX(-90deg) translate3d(-150rem,0,-200rem);
	box-shadow:0 0 1rem #7f95a8,inset 0 0 10rem 0 rgba(17,14,18,0.2);
	background:radial-gradient(#fff,#7f95a8)
}
ceiling:before {
	display:none
}
ceiling:after {
	transform:rotateX(90deg) translate3d(0,150rem,150rem);
	background:radial-gradient(circle at center top,#7f95a8,#110e12)
}
wall1 painting,wall2 painting,wall3 painting {
	width:120rem;
	height:156rem;
	border:2rem solid #d9996b;
	border-top-color:#221309;
	border-left-color:#361f0e;
	border-right-color:#4a2b13;
	transform:rotateY(-90deg) translate3d(0,-17rem,-89rem);
	background:#110e12;
	box-shadow:0 5rem 2rem -2rem rgba(17,14,18,0.5),inset 0 0 10rem #000;
	border-radius:2rem;
	padding:1rem
}
wall1 painting p,wall2 painting p,wall3 painting p {
	color:#fff;
	top:96%;
	left:50rem;
	font-size:8rem;
	transform:translate3d(0,5rem,0) scaleY(0);
	width:130rem;
	width:0;
	text-shadow:5rem 5rem 2rem #110e12;
	transform-origin:-62rem 0;
	transition:.5s ease-in-out;
	line-height:1.05em;
	word-wrap:break-word
}
wall1 painting p:before,wall2 painting p:before,wall3 painting p:before {
	width:52rem;
	height:22rem;
	border-right:.5rem solid #fff;
	border-top:.5rem solid #fff;
	transform:translate3d(-56rem,0rem,0);
	box-shadow:2rem 0 1rem -1rem rgba(17,14,18,0.5),inset 0 2rem 1rem -1rem rgba(17,14,18,0.5)
}
wall1 painting p:after,wall2 painting p:after,wall3 painting p:after {
	width:6rem;
	height:50rem;
	border-left:.5rem solid #fff;
	border-right:.5rem solid #fff;
	transform:skewY(45deg) translate3d(-62rem,9.5rem,0);
	box-shadow:2rem 0 1rem -1rem rgba(17,14,18,0.5),inset 2rem 0 1rem -1rem rgba(17,14,18,0.5)
}
wall1 painting p *,wall2 painting p *,wall3 painting p * {
	position:relative;
	content:normal
}
wall2 painting {
	width:200rem;
	height:126rem;
	transform:translate3d(-100rem,0,148rem) scaleX(-1)
}
wall3 painting {
	width:110rem;
	height:144rem;
	transform:rotateY(90deg) translate3d(0,-17rem,-200rem)
}
wall4 {
	transform:translate3d(-150rem,-50rem,-150rem);
	background:radial-gradient(circle at 60% 80%,rgba(255,255,255,0),rgba(17,14,18,0.5)),linear-gradient(to right,rgba(17,14,18,0.5),rgba(255,255,255,0),rgba(255,255,255,0),rgba(17,14,18,0.5));
	box-shadow:0 0 1rem #110e12;
	width:300rem;
	height:250rem
}
wall4:before,wall4 door {
	width:86rem;
	height:224rem;
	border-radius:1rem;
	box-shadow:0 0 0 150rem #7f95a8;
	left:-10rem;
	right:-10rem;
	margin:auto;
	top:60rem;
	transform:translate3d(0,0,-1rem)
}
wall4:after {
	width:10rem;
	height:224rem;
	background:linear-gradient(#110e12,#9daebd,#637c91);
	transform:translate3d(183rem,65rem,-4.5rem) rotateY(90deg)
}
wall4 door {
	border:5rem ridge rgba(157,174,189,0.65);
	box-shadow:1rem .5rem 1rem rgba(17,14,18,0.5),0 0 1rem .5rem rgba(17,14,18,0.5),0 0 10rem rgba(17,14,18,0.2);
	transform:translate3d(0,0,0.5rem)
}
wall4 door:before,wall4 door:after {
	transform:translate3d(0,0,-1rem) rotateY(10deg);
	transform-origin:0 0;
	border-radius:1rem
}
wall4 door:before {
	width:100%;
	height:185rem;
	background:radial-gradient(circle at top left,rgba(188,199,209,0.2),#9daebd) #9daebd;
	box-shadow:inset 0 0 1.5rem #000,0 0 1.5rem #000,inset 0 0 5rem rgba(0,.........完整代码请登录后点击上方下载按钮下载查看