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"> <img class="face" src="//repo.bfw.wiki/bfwrepo/image/5fb3047538091.png" alt=""> <img class="face" src="//repo.bfw.wiki/bfwrepo/image/5fb30d81b66fd.png" alt=""> <img class="face" src="//repo.bfw.wiki/bfwrepo/image/5fb30dbbc4c7b.png" alt=""> <img class="face" src="//repo.bfw.wiki/bfwrepo/image/5fb30de5391aa.png" alt=""> <img class="face" src="//repo.bfw.wiki/bfwrepo/image/5fb30e060d133.png" alt=""> <img class="face" src="//repo.bfw.wiki/bfwrepo/image/5fb30e2c49adf.........完整代码请登录后点击上方下载按钮下载查看
网友评论0