css3创建3D场景

浏览器本身是一个2维平面，对于3D的情况，实际上是增加了一个维度（深度），所以我们需要创建一个3D场景。这时浏览器不仅仅是一个平面了，更像是一个窗口，我们透过这个窗口去观察里面的三维世界。所谓的创建3D场景，就是告诉浏览器，我们是在这个窗口的哪个角度对这个3维世界进行观察，窗口里的3维物体距离这个窗口到底有多远。

设置好3D场景后，浏览器中的物体虽然已经变成是3维的了，但是如果我们不进行任何设置，他们看起来还是和二维的效果是一样的。所以我们需要使用一个新的属性 transform 来对这些元素进行调整，以展现出他们的3维效果。事实上对于 transform 这个属性同样也适用于2D的场景，所以为了让浏览器知道我们现在所使用的 transform 调整元素是在一个3维空间下，我们需要加上这样一个属性：transform-style:preserve-3d;-webkit-transform-style:preserve-3d;

一个例子：

html：

 <nav>

     <a href="#"><span data-hover="Hello">Hello</span></a>

 </nav>

css：

/*基本样式*/

*{padding:;margin:;font-family:'微软雅黑';box-sizing:border-box;}

nav{width:100%;height:200px;background:#0e83cd;padding:50px 100px;}

a{width:160px;height:45px;display:inline-block;line-height:45px;text-align:center;text-decoration:none;margin:10px 20px;font-size:24px;}

span{width:100%;display:inline-block;color:#fff;background:#2195de;padding:0 10px;position:relative;}

/*3d效果样式*/

a{

    -webkit-perspective:1000px;

}

a span{

    -webkit-transform-origin:0 0;

    -webkit-transform-style:preserve-3d;

    -webkit-transition:-webkit-transform 0.3s;

}

a span::before{

    content:attr(data-hover);

    position:absolute;left:;top:100%;

    width:100%;height:100%;background:#0965a0;

    -webkit-transform-origin:0 0;

    -webkit-transform-style:preserve-3d;

    -webkit-transform:rotateX(-90deg);

    -webkit-transition:background 0.3s;

}

a:hover span{

    -webkit-transform:rotateX(90deg) translateY(-22px);

}

a:hover span::before{

    background:#2195de;

}

css样式分析：（这里是只针对Chrome浏览器做的demo）

一、在需要3d效果的元素的父级创建3D场景，也就是添加下面两条属性。

-webkit-perspective:1000px;

-webkit-perspective-origin:(50% 50%); --默认值，没有做设置。

二、具体到每个3d效果的元素，需首先设置下面两条属性，

-webkit-transform-style:preserve-3d; --3d效果必须加上这一条，也是固定不变的一条。

-webkit-transform-origin:(0 0); --根据需求设置前两个参数

然后具体添加transform的变换属性。

三、一个疑惑，暂未找到原因

 a:hover span{

     -webkit-transform:rotateX(90deg);

     -webkit-transform:rotateX(90deg) translateY(-22px);

     -webkit-transform:translateY(-22px) rotateX(90deg);

 }

在 -webkit-transform 中 rotateX(90deg) 和 translateY(-22px) 的调用顺序不同，得到的的效果会有差别。

注意点：

1、CSS3 perspective-origin 属性的默认值为(50% 50%)，一般情况不需要设置，保持默认即可以。

2、CSS3 transform-origin 属性的默认值为(50% 50% 0)，一般情况需要根据需求设置前两个参数。

transform-origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

3、注意 perspective-origin 与 transform-origin 的区分，别弄混了。

巴特西

css3创建3D场景

最新文章

热门文章