css实现挂上画的360度三维vr房间交互效果代码
代码语言：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,.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0