学习CSS3 3D转换，制作一个3D立方体
要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需要注意的地方，这里把我学习的方法，过程分享给大家。再讲知识点之前，还是先弄清楚3D的坐标系吧，从网上搜了一张经典坐标系图，供大家回顾一下。1. 3D视图 transform-style:flat（默认，二维效果）/preser
要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需要注意的地方，这里把我学习的方法，过程分享给大家。再讲知识点之前，还是先弄清楚3D的坐标系吧，从网上搜了一张经典坐标系图，供大家回顾一下。
1. 3D视图
transform-style:flat（默认，二维效果）/preserve-3d（三维效果）。设置一个元素的transform-style:preserve-3d;只影响这个元素的子元素（如果孙元素也需要有3d效果，则需要给该元素的父元素设置preserve-3d）。这样所有的子元素都可以相对于父元素进行3d转换操作。和二维变化一样，三维变化使用transform属性来设置。下面列举几个常用的函数：
translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写，如：translateX(length),translateY(length), translateZ(length)。注意z轴的值只能为px;
scale3d(number,number,number) 使元素在这三个纬度中缩放，也可分开写，如：scaleX(),scaleY(),scaleY()。
rotateX(angle) 是元素依照x轴旋转；
rotateY(angle) 是元素依照y轴旋转；
rotateZ(angle) 是元素依照z轴旋转。
2. 透视效果
perspective(length)为设置三维透视的距离。仅作用于元素的后代，而不是元素本身。当perspective:none;或perspective:0;时，相当于没有设置perspective(length)。
加入要创建一个小立方体，长宽高都是200px，如果perspective的属性值小于200px，那么就相当于站在盒子里面看结果，如果perspective的属性值非常大，那就是站在非常远的地方看。
当元素没有设置perspective时，所有后代被压缩在二维平面上，不存在透视效果。如果设置了perspective，将会看到三维效果。默认的透视视角中心是在容器的中点（注意是设置perspective的元素中点，不是他的后代元素），也就是perspective-origin:50% 50%;,也可以自己设置，比如：perspective-origin:0% 0%;,则是将视角定在左上角。
下面是几张效果图，创建了一个长宽高都是200px的立方体，三维中点(0,0,0)在立方体的中心，效果如下：
当不设置perspective，也没有动画的初始画面，效果如下：
可以看到我们根本不知道他是一个立方体，除非他像上面那样动一下。
当加上perspective属性时：
当perspective小于100px时（因为三维中点在立方体中心，所以相当于立方体在Z轴上的高度只有100px），可以看出是相当于在立方体里面看结果:
注意：
（1）如果一个元素绕x轴或者y轴旋转90度以上的话，他的背面将面向用户。背面的元素始终是透明的，所以用户能在后面看到正面的反向形态。如果不想让从背面看到正面的话，可以设置backface-visibility为hidden，那么这个元素在背面时是不可见的。比如说做扑克牌时是不希望在背面看到的。如果一个元素的背面是可见的，旋转时他将掩盖他下面的元素，而不是露出他下面的元素。
（2）如果父元素设置了overflow:hidden;那么子元素就无法跳出父元素的平面，即z轴的效果都将无法显示，相当于transform-style:flat;
下面是我写的代码，分享一下，如有不足请指正，谢谢！
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<style>
*{
margin: 0;
padding: 0;
}
.parent{
position: relative;
height: 400px;
width:80%;
margin-left: 10%;
transform-style: preserve-3d;
animation: test1 8s ease infinite;
}
.box{
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
width:200px;
height: 200px;
color: #FFFFFF;
font-size: 30px;
font-weight: 700;
line-height: 200px;
text-align: center;
opacity: 0.8;
}
.box1{
background: #2b669a;
transform: rotateY(90deg) translateZ(-100px);
}
.box2{
background: #509a64;
transform: rotateY(90deg) translateZ(100px);
}
.box3{
background: #9a5468;
transform: rotateX(90deg) translateZ(-100px);
}
.box4{
background: #979a25;
transform: rotateX(90deg) translateZ(100px);
}
.box5{
background: #97709a;
transform: translateZ(-100px);
}
.box6{
background: #589a25;
transform: translateZ(100px);
}
@keyframes test1 {
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="parent animation" id="css3d">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
</div>
</body>
</html>
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)