css全景图

Posted on   |   In   |  

用css3做了一个全景图, 效果不太好 不过思路应该是没什么大问题
主要是css3弄了个立方体, 各个面贴图, 通过transform控制立方体旋转
把观察点放在立方体中心, 这样边上的贴图就是立体的了

示例

html

最外层是容器样式, 中间层是观察点, 里层是立方体
为了好算把cube的中心点放在坐标轴原点上

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="container"><!-- 1.container仅仅是容器,和3d变化无关,边框和长宽只是给为了看着明显 -->
    <div id="camera"><!-- 2.camera是镜头的位置,观察点 -->
        <div class="cube"><!-- 3.cube是图片组成的立方体,程序只旋转和平移此cube -->
            <!-- 4.pics是各个面的贴图 -->
            <div class="p-back pics">back</div>
            <div class="p-left pics">left</div>
            <div class="p-font pics">font</div>
            <div class="p-right pics">right</div>
            <div class="p-bottom pics">bottom</div>
            <div class="p-top pics">top</div>
        </div>
    </div>
</div>

css

container

就是容器的样式,有个边框容易观察

1
2
3
4
5
6
7
8
#container {
    position: relative;
    width:600px;
    height:600px;
    margin-left:500px;
    margin-top:100px;
    border: 2px solid red;
}

camera

容器里宽高固定的话才能算中心点, 所以wh都得是100%
transform-style:preserve-3d;这个不继承, 需要显示声明
perspective: 是焦距, 这个值大的话就类似长焦效果, 不过太大就会退到3D模型外边了

1
2
3
4
5
6
7
8
#camera {
    position: absolute;/*保证中心一致,所以wh都一样*/
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    perspective: 130px;/*焦距,观察点到中心距离*/
    overflow: hidden;
}

cube

立方体是各面贴图的载体, 旋转的圆心是中心
在观察点不变的前提下, 旋转立方体去获得全景的效果

1
2
3
4
5
6
7
8
.cube{
    position: absolute;
    width:100%;/*保证中心一致,所以wh都一样*/
    height:100%;
    transform-style:preserve-3d;
    transform-origin: 50% 50% 0;/*旋转中心*/
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

pics

立方体每个面都是300*300大小, top和left调整位置

1
2
3
4
5
6
7
8
.pics {
    position: absolute;
    width: 300px;
    height: 300px;
    left: 150px;
    top: 150px;
    background-size: cover;
}

pics

各个面的贴图,
为了调整位置 所有贴图跟这立方体向z轴方向后退半个边长(300/2)
根据各个面的位置 做水平和垂直反转, 保证在立方体内部看到的图片是正的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.p-back{
    background: url("./1.jpg") no-repeat;
    background-size: cover;
    background-color:red;
    transform: translateZ(-150px);
}
.p-left{
    background: url("./0.jpg") no-repeat;
    background-size: cover;
    background-color:orange;
    transform: rotateY(90deg) translateZ(-150px);
}
.p-font{
    background: url("./3.jpg") no-repeat;
    background-size: cover;
    background-color:#666;
    transform: translateZ(150px) rotateY(180deg);/*水平翻转*/
}
.p-right{
    background: url("./2.jpg") no-repeat;
    background-size: cover;
    background-color:blue;
    transform: rotateY(-90deg) translateZ(-150px);
}
.p-bottom{
    background: url("./5.jpg") no-repeat;
    background-size: cover;
    background-color:green;
    transform: rotateX(90deg) translateZ(-150px);
}
.p-top{
    background: url("./4.jpg") no-repeat;
    background-size: cover;
    transform: rotateX(-90deg) translateZ(-150px);
}

动画

最后加个animation让他动起来

1
2
3
4
5
6
7
8
9
10
11
12
13
@-webkit-keyframes rotate {
    0% {
        -webkit-transform:rotateY(0deg);
    }  
    100% {
        -webkit-transform:rotateY(-360deg);
    }
}
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name:"rotate";
    -webkit-animation-iteration-count: infinite;