js+css实现六张图合成720度全景vr效果代码-html代码-BFW代码库

js+css实现六张图合成720度全景vr效果代码

代码语言：html

所属分类：三维

代码描述：js+css实现六张图合成720度全景vr效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
html {
        overflow: hidden;
        touch-action: none;
        content-zooming: none;
}

body {
        background:#000;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        touch-event: none;
}

#screen {
        position:absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        perspective: 400px;
        perspective-origin: center;
        cursor: pointer;
}

#cube img:nth-child(1) {
        transform:translateZ(-199px);
}
#cube img:nth-child(2) {
        transform:rotateY(90deg) translateZ(-199px);
}
#cube img:nth-child(3) {
        transform:rotateY(-90deg) translateZ(-199px);
}
#cube img:nth-child(4) {
        transform:rotateX(-90deg) translateZ(-199px);
}
#cube img:nth-child(5) {
        transform:rotateX(90deg) translateZ(-199px);
}
#cube img:nth-child(6) {
        transform:rotateY(180deg) translateZ(-199px);
}

#cube {
        position:absolute;
        width:400px;
        height:400px;
        margin: auto;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        transform-style: preserve-3d;
        transform:  translateZ(400px);
}

#cube .face {
        position:absolute;
        pointer-events:none;
        width:100%;
        height:100%;
}
</style>



</head>

<body translate="no" >
  <div id="screen">

        <div id="cube".........完整代码请登录后点击上方下载按钮下载查看