html如何实现立体效果,CSS3实现3D立体效果

CSS3实现3D效果 1. 涉及到的几个CSS3属性 首先大家需要了解transform属性，主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate)。 这里涉及到3d转换的主要介绍旋转。 下面通过一组rotate效果直观理解rotateX,rotateY,rotateZ区别。 代码： .box{ width: 200px;height: 200px; background:#abcdef; margin:100px; float:left; } .box1{ -webkit-transform:rotatex(45deg) } .box2{ -webkit-transform:rotatey(45deg) } .box3{ -webkit-transform:rotatez(45deg) } .stage{ height: 300px; border: 1px solid blue; -webkit-transform-style:preserve-3d; -webkit-perspective:300px; }

rotateX

rotateY

rotateZ

效果如图：

分析：仔细看上面代阿码中，三个div框套在一个id为stage的div父框中。父框即为舞台，我们假设站在舞台下面看表演，整个父框就是舞台，里面的子元素就是演员，呈现出不同的姿态，面向我们的是rotateX，侧身的rotateY，在屏幕屏幕滚动的是rotateZ。

Z轴其实就是我们眼睛看过去的方向。

stage里面有个非常重要的属性：

1)transform–style属性指定嵌套元素是怎样在三维空间中呈现,CSS规范里面这样规定：

flat 子元素将不保留其 3D 位置。

preserve-3d 子元素将保留其 3D 位置。

所以我们为了3d呈现，添加该属性：

-webkit-transform-style:preserve-3d

2)perspective的中文意思是：透视，视角。我们透视点应该就在浏览器的前方。所以该属性设置的距离越大，舞台离我们越远，呈现的元素就会越小。

perspective属性的存在与否决定了你所看到的是2次元的还是3次元的，也就是是2D transform还是3D transform。没有透视，不成3D。

3)给子元素设置translateZ。我们知道在2d变换中有translate属性，这个也是一样，只不过是顺着z轴平移，也就是设置的translateZ值越小，则子元素大小越小(因为元素远去，我们眼睛看到的就会变小)；translateZ值越大，该元素也会越来越大，当translateZ值非常接近perspective设置的像素，但是不超过该像素的时候(如300像素)，该元素的大小就会撑满整个屏幕。接下来我们会利用该属性来调整子元素，实现一个立方体的效果。

2. 立方体制作

立方体有六个面，如果舞台中立方体正对我们，我们只能看到一个正面，也就是其他5个面都看不见。

我们通过代码完成前面(本文代码是在chrome浏览器测试，以下代码能够兼容webkit内核和火狐浏览器)：

.box6{

-webkit-transform: translatez(100px);

-moz-transform:translatez(100px);

background: rgba(0,255,255,.5);

}

translateZ让平面向视点走100px。

所以第二个平面背面的代码：

.box5{

-webkit-transform: translatez(-100px);

-moz-transform:translatez(-100px);

background: rgba(153,204,255,.5)}

同理：两个侧面的代码就是rotateY：90，同时左右分开100px像素，代码如下：

.box1{

-webkit-transform:rotatey(90deg) translatez(-100px);

-moz-transform:rotatey(90deg) translatez(-100px);

background: rgba(128,0,128,.5);

}

.box2{

-webkit-transform:rotatey(90deg) translatez(100px);

-moz-transform:rotatey(90deg) translatez(100px);

background: rgba(255,0,255,.5);

}

上下两个平面，代码：

.box3{

-webkit-transform:rotatex(90deg) translatez(100px);

-moz-transform:rotatex(90deg) translatez(100px);

background: rgba(255,153,204,.5);

}

.box4{

-webkit-transform:rotatex(90deg) translatez(-100px);

-moz-transform:rotatex(90deg) translatez(-100px);

background: rgba(0,204,255,.5);

}

再将开始的html页面增加几个div，调整一下：整体代码如下：

.box{

width: 200px;height: 200px;

background:#abcdef;

position: absolute;/每个平面都需要进行平移，在舞台上默认水平居中，所以设置绝对定位/

left:50%;/在舞台上水平居中/

top:20%;

}

.box1{

-webkit-transform:rotatey(90deg) translatez(-100px);

-moz-transform:rotatey(90deg) translatez(-100px);

background: rgba(128,0,128,.5);

}

.box2{

-webkit-transform:rotatey(90deg) translatez(100px);

-moz-transform:rotatey(90deg) translatez(100px);

background: rgba(255,0,255,.5);

}

.box3{

-webkit-transform:rotatex(90deg) translatez(100px);

-moz-transform:rotatex(90deg) translatez(100px);

background: rgba(255,153,204,.5);

}

.box4{

-webkit-transform:rotatex(90deg) translatez(-100px);

-moz-transform:rotatex(90deg) translatez(-100px);

background: rgba(0,204,255,.5);

}

.box5{

-webkit-transform: translatez(-100px);

-moz-transform:translatez(-100px);

background: rgba(153,204,255,.5);

}

.box6{

-webkit-transform: translatez(100px);

-moz-transform:translatez(100px);

background: rgba(0,255,255,.5);

}

.stage{

height: 300px;

transform-style:preserve-3d;

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

-webkit-perspective:0px;

position: relative;/为了让子元素相对于stage参照定为，在此设置为定位属性/

}

运行后效果如下：

我们刚开始说了，只能看到正面，现在我们如果将舞台旋转起来，各个平面就可以一览无余了。

这里给舞台div设置旋转动画：

-webkit-animation:mydonghua 5s ease infinite;

-moz-animation:mydonghua 5s ease infinite;

接下来定义mydonghua的行为：

@-webkit-keyframes mydhua{

0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}

100%{-webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);-webkit-transform-origin: center center; }

}

@-moz-keyframes mydhua{

0%{-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}

100%{-moz-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg); -webkit-transform-origin: center center;}

}

最终运行效果(此处截图，应该是一个反复旋转的动画)：

小结

CSS3涉及到3d变换关键属性：

1. perspective属性，该属性表示视点，该属性调整我们视点的远近。

2. rotate(degree)，旋转分别绕x,y,z轴进行degree度旋转。

3. transform-style可以设置元素所处的是3d空间还是平面。Flat表示平面。

4. translateZ 绕z轴平移，调整平面向自己所面向的方向移动的距离。如果取值为负值，表示平面向背向的方向移动一定距离。