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规范⾥⾯这样规定：html滚动效果代码
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轴平移，调整平⾯向⾃⼰所⾯向的⽅向移动的距离。如果取值为负值，表⽰平⾯向背向的⽅向移动⼀定距离。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。