要想实现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;
下面是我写的代码,分享一下,如有不足请指正,谢谢!
<html>
<head>
<title>Hellotitle>
<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">1div>
<div class="box box2">2div>
<div class="box box3">3div>
<div class="box box4">4div>
<div class="box box5">5div>
<div class="box box6">6div>
div>
body>
html>