類vr特效的360度全景

時間 2019-11-12

標籤特效全景简体版

原文原文鏈接

作法有點粗糙，沒有去優化一下，只是使用了css3的技術去玩了一下；css

代碼：html

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。