用css3,transform3d制作房屋全景展示效果（一）

我最终想要做一个这样的效果，如图：

我选择用手机端来展示，因为手机端浏览器对css3支持的比较好。制作这样的一个效果之前，首先要学会制作一个3d的盒模型，就跟div盒子布局一样。但是自从有了h5和css3之后，我们就有了制作3d盒子模型的能力。不多说先写为敬。

首先我们先建立一个h5的基础结构：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">


<meta name="viewport"content="width=device-width,user-scalable=no"/>
<title>Title</title>
</head>
<body>
</body>
</html>

这个3d盒子模型呈现效果如图：

用css3,transform3d制作房屋全景展示效果（一）

接下来我们搭建这个盒子的html结构

<div id="box">
    <div id="div">
        <span>前</span>
        <span>右</span>
        <span>后</span>
        <span>左</span>
        <span>上</span>
        <span>下</span>
    </div>
</div>

最外层为那个黑框，里面这个div为整个立方体，span为每个面。首先为最外层box写css样式。

#box{
    width: 100px;
    height: 100px;
    border: 1px solid#000;
    padding: 100px;
    -webkit-perspective: 300px;
    perspective: 300px;
}

长宽高什么的就不说了，我们说一下这个新增属性perspectiv，它为透视深度，也就是z轴的深度，z轴在哪呢？以前我们只有二维，横着为x竖着为y，这个z轴就是垂直于我们眼睛的轴线。现在在我们眼前这个屏幕上，就有了一个xy为300（注：虽然css里面写的是100但是还有100的内边距），z也为300的立方体。只不过这个z300的深度我们无法直接看出来。3d变换样式Chrome 和 Safari 需要加-webkit-前缀。

往下：
#div {
    width: 100px;
    height: 100px;
    color: #fff;
    font-size: 50px;
    line-height: 100px;
    text-align: center;
    position: relative;
    -webkit-transform-style:preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin:center center -50px;
    transform-origin: center center -50px;
    transition: 5s;
}

这就是里面那个具体要做旋转的立方体的css样式，前面不多言，我们从相对定位开始说。相对定位的作用无非是为子集提供参考坐标，一会儿我们会先让所有的面全叠在最前面这个面上，然后我们在用css3旋转到它自己的位置。

Transform-style这里需要指明它进行的变换为3d变换，因为默认是2d的变换。Transform-origin顾名思义，就是变换原点的意思，值为xyz,默认的原点是在二维平面上xy的交叉点，也就是“前”这个面的中心的，我们给z，-50px就让原点来到了这个立方体的中心。

最后transition为我们给的过度动画时间，只有添加此值，我们才能看见它慢慢变化的效果对吧！

下面我们来写每个面：

div span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    -webkit-transform-origin:center center -50px;
    transform-origin: center center -50px;
}

上面我们已经说过，给它绝对定位，让他们叠在一起，跟轮图似得是吧！然后一定记得也要给每个面设置变换原点。

定位好了我们就让每个面旋转到自己该出现的位置：

#div span:nth-of-type(1){
    background: red;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
#div span:nth-of-type(2){
    background: yellow;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
}
#div span:nth-of-type(3){
    background: blue;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
#div span:nth-of-type(4){
    background: green;
    -webkit-transform: rotateY(270deg);
    transform: rotateY(270deg);
}
#div span:nth-of-type(5){
    background: pink;
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
}
#div span:nth-of-type(6){
    background: #000;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
}

颜色不解释了，说一下rotate，2d的时候它的值为弧度值，正值就是顺时针旋转，负值为逆时针旋转。3d的时候它便支持xy两个方向的旋转。具体旋转效果，大家在调试状态里面试一下就知道了。

最后我们写一段js让它动起来：

window.onload= function(){
var div= document.querySelector('#div');
div.style.WebkitTransform= div.style.transform= "rotateX(360deg)";
};

让这个立方体在文档加载完毕后，进行一个延x轴360的旋转，这个div还有一个5秒钟的缓动的动画，执行完便是二图我们看到的效果啦！

第一步已经完成，下一步我们只需要进到立方体里面，再把图都贴上，就能看到我们设计好的效果啦。下篇见。

更多请关注公众号：FE学习笔记

用css3,transform3d制作房屋全景展示效果（一）

相关推荐