用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盒子模型呈现效果如图：

接下来我们搭建这个盒子的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制作房屋全景展示效果（一）相关推荐

【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
css图片6边形,CSS3 实现六边形Div图片展示效果
一. 效果图二. 原理讲解这个效果用到的主要知识点 : 1. transform: rotate(120deg); 图片旋转 2. overflow: hidden; 超出隐藏 3. visibi ...
CSS3 实现六边形Div图片展示效果
二. 原理讲解这个效果用到的主要知识点 : 1. transform: rotate(120deg); 图片旋转 2. overflow: hidden; 超出隐藏 3. visibility: h ...
720vr全景展示效果怎么样？720VR全景科普
目前,VR全景作为商业的新型营销模式被广泛的宣传,但是很多店主或者企业认为VR全景作为广告的方式不靠谱,很多VR全景加盟商没有办法有力的说服他们来进行VR全景的拍摄,减缓了自身抢占市场的效率.于是,接 ...
会唱歌的棒棒糖3D展示效果，产品三维模型运用
商迪3D带来最近新款"会唱歌的棒棒糖"3d产品展示案例炫酷来袭!3d产品展示可以有更好地帮助会唱歌的棒棒糖产品展示很多优势,3d产品展示对会唱歌的棒棒糖产品销售影响力远远超过很多预 ...
VR全景展示,全景VR如何制作，如何制作高质量VR全景图！
VR全景展示和全景VR制作是近年来越来越受欢迎的技术,能够给用户带来非常沉浸式的体验,同时也有广泛的应用场景. 在这篇文章中,我们将介绍VR全景展示和全景VR制作的相关知识和技术,帮助您更好地了解和应 ...
全景图片怎么制作？360度全景展示系统都有哪些功能？
360度全景一般是指VR全景,在VR全景中我们可以通过旋转视角看到前后左右乃至上下,给人以身临其境的视觉效果.目前VR全景技术已是目前全球范围内迅速发展并逐步流行的一种视觉新技术.越来越多的商企.房产 ...
使用css3渐变制作纹理效果
使用css3渐变制作纹理效果 Web页面中常用纹理图片制作背景,这通过制图软件很快就能实现,但对于不懂设计的人来说并不是一件容易的事.CSS3的渐变特性,可以直接使用代码实现一些纹理背景效果. 接下来 ...
全方位了解VR全景展示与制作
引言: 虚拟现实(VR)技术正在以惊人的速度改变我们的生活方式和体验方式.其中,VR全景展示与制作作为虚拟现实的重要应用之一,为用户提供了身临其境的视听体验. 一.了解VR全景展示与制作 1.VR全景 ...

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

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

最新文章

热门文章