类vr特效的360度全景

做法有点粗糙，没有去优化一下，只是使用了css3的技术去玩了一下；

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D-VR</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <style>
    body{
        margin: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    #wrap2{
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        transform:translateZ(200px);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        overflow: hidden;
        perspective: 300px;
    }
    #wrap{
        width: 1024px;
        height: 1024px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -512px 0 0 -512px;
        border:1% solid #000;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        transform: rotateY(0deg);
        transition: 20s;
    }
    .vr{
        width: 100%;
        height: 100%;
        color: #fff;
        position: absolute;
    }
    .vr:nth-of-type(1){
        background: url(img/neg-x.png) no-repeat;
        background-size: 100% 100%;
        
        transform: rotateY(0deg) translateZ(-512px);
        backface-visibility: hidden;
    }
    .vr:nth-of-type(2){
        background:  url(img/pos-z.png) no-repeat;
        background-size: 100% 100%;
        
        transform: rotateY(-90deg) translateZ(-512px);
        backface-visibility: hidden;
    }
    .vr:nth-of-type(3){
        background: url(img/pos-x.png) no-repeat;
        background-size: 100% 100%;
        
        transform: rotateY(-180deg) translateZ(-512px);
        backface-visibility: hidden;
    }
    .vr:nth-of-type(4){
        background: url(img/neg-z.png) no-repeat;
        background-size: 100% 100%;
        
        transform: rotateY(-270deg) translateZ(-512px);
        backface-visibility: hidden;
    }
    .vr:nth-of-type(5){
        background: url(img/pos-y.png) no-repeat;
        background-size: 100% 100%;
        
        transform: rotateX(-90deg) translateZ(-512px);
        backface-visibility: hidden;
    }
    .vr:nth-of-type(6){
        background: url(img/neg-y.png) no-repeat;
        background-size: 100% 100%;
        
        transform: rotateX(90deg) translateZ(-512px);
        backface-visibility: hidden;
    }
    </style>

</head>
<body>
<!-- 3d盒子的原理上实现，就是六张图片拼成 -->
<!-- 利用translate不移动原点的方式移动各个的相对于原点的位置，到达移动原点的方式
而这也解决了ios的transform-origin不兼容问题
只要移动祖先级就可以达到translate带来的缩放问题
transform 执行顺序是最后写先执行

 -->
<div id="wrap2">
    <div id="wrap">
        <div class="vr">1</div>
        <div class="vr">2</div>
        <div class="vr">3</div>
        <div class="vr">4</div>
        <div class="vr">5</div>
        <div class="vr">6</div>
    </div>
</div>
<script>
window.onload=function(){
    document.querySelector("#wrap").onclick=function(){
        document.querySelector("#wrap").style.transform="rotateY(360deg)";
    }
}
</script>
</body>
</html>

相关阅读:
求全排列，调用C++函数
 ZOJ 3508 （the war）
HDU 1285
SDUT--枚举（删数问题）
SDUT--进制转换
 位运算
 [NOI2015]软件包管理器
 列队[noip2017]
[APIO2007]动物园
 [NOI2001]炮兵阵地
原文地址：https://www.cnblogs.com/zhangzhicheng/p/6624581.html