3分钟可以干什么？
哈哈。
之前发了一个用CSS3做的3D场景，可能代码比较多，那这次，我们先来看一些比较基础的，先做一个立方体，怎么样？
今天，本萌新来叫大家合理的使用chrome的debug调试工具，制作一个css3的3D立方体，下面得视频是我做的演示视频，可能有点模糊，没关系，关于debug的css调试，我会在下一期出一个比较详细的教程视频的，这里大家看一下整个流程就可以了，非常强大！
什么？视频看不清楚？，呐，代码入下：
1.将浏览器的css3渲染模式改为3D
-moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
2.设置透视距离
在3d世界中，离你近的东西看起来比较大，离你远的东西看起来比较小，这样我们在才能看到一个比较立体的世界。设置的代码入下：
-moz-perspective: 900px; perspective: 900; -webkit-perspective: 900; /* Safari 和 Chrome */
注意这里除了头文件兼容，还要注意，在火狐和ie下面一定要注意后面的单位
3.旋转和移动
css3提供了transform的属性支持3d场景下面的位移和旋转
包含两个属性 rotate（旋转） translate（位移） 3D场景中坐标由原来的二维坐标（x,y）变更为三维坐标，即(x,y,z)； 所以以上两个属性分别支持3方向的位移和旋转； 如
transform: rotateX(20deg) rotateY(15deg) rotateZ(0deg) translateX(200px) translateY(300px) translateZ(300px);
以下为项目全部源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3d盒子</title>
<style>
body
{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 900;
perspective: 900;
}
.box
{
width: 100px;
height: 100px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
position: absolute;
top:100px;
left: 300px;
transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
animation: dh_nav 15s infinite linear
}
@keyframes dh_nav {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
}
50% {
transform: rotateX(3600deg) rotateY(0deg) rotateZ(0deg) translateX(800px) translateY(0px) translateZ(0px);
-webkit-transform: rotateX(3600deg) rotateY(0deg) rotateZ(0deg) translateX(800px) translateY(0px) translateZ(0px);
}
100% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
}
}
.box div
{
width: 100px;
height: 100px;
position: absolute;
top:0px;
left: 0px;
font-size: 40px;
line-height: 100px;
text-align: center;
}
.box .top
{
background: red;
transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(50px);
}
.box .bottom
{
background: green;
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(50px);
}
.box .left
{
background: blue;
transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(50px);
}
.box .right
{
background: #ccc;
transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(50px);
}
.box .qian
{
background: #000;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(50px);
}
.box .hou
{
background: #CC681B;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(-50px);
}
</style>
</head>
<body>
<div class="box">
<div class="top">上</div>
<div class="bottom">下</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="qian">前</div>
<div class="hou">后</div>
</div>
</body>
</html>
牛