CSS实现3D动画有感

开篇小论

最近折腾个人网站的开篇动画，好好学习了一把3D动画制作，当然这个兼容性是坎，看到动画得IE10以上了。原本不想太复杂，但是构思了一下，想要一种开门见山的感觉，所以就想到了要开一扇门，还要走进去，然后出现。结果发现，这些如果不用3D效果，那就是生硬的摩擦感，于是乎就好好研究了一番，发现3d动画也难也简单，难的是实现思路和逻辑，简单的是就那么几个属性控制，所以就先来啰嗦啰嗦属性。

动画属性

众所周知的，CSS3提供的动画元素为首的就是transform，之前还要使用各种前缀，不过经测试，目前已经不需要了，主流通吃，除非要兼容低级别浏览器，且不用3D动画（低级别也看不了）。transform提供了各种变化方式（为了不写太多字，不细分不罗列所有方式了，更多的运用可以查询该属性的介绍）旋转：rotate；移动：translate；缩放：scale等等，这些位置变化是实现动画的关键；

其他常用的如下：

transform-style：这是动画的形式，两个值flat和preserve-3d，前者是默认值平面，也就是没有3d效果，后者是3d效果展示，如果要用3D表现，这个属性是必须启用的，当然注意属性要加各种前缀；

transform-origin：旋转移动围绕的轴线，默认是中心，可以设left,right,top,bottom,也可以设值数值，这样可以调整旋转移动所围绕的轴线，完成诸如翻页，开门等动作；

perspective：视角，说白了，就是看东西的方向，这也是3d动画必备的属性，如果不添加这个属性，则动画会变成平面效果。一般用在舞台元素也就是容器上，这样会让该容器中所用动画元素使用一个视角，这个属性还可以单独用在每个元素中，自然元素也就只呈现自己的视角样式。perspective和translateZ,rotate属性有密切的关系：现实生活中，你是看不到在你后面的东西，当一个东西和你的视角平面垂直时，看到的是一条线（足够厚的东西，否则也看不见了，视觉盲区的概念）；放到css中，如果translateZ（调整z轴位置）的值大于或等于perspective，这个元素相当于移到视线后面了，看不见了，如果值小于，则看起来会变小，也就是视觉离得越远，同理rotate垂直时，也会看到一条线或看不到。明白这一点了，也就会知道为啥perspective这个属性与3D动画息息相关了。

backface-visibility：后面元素不可见，现实生活中，一个物体后面的元素我们是看不见的，但是CSS中会显示（如环形幻灯片展示），所以如果希望和现实相符，则可以把这个属性设为hidden；

transition：渐变属性，后面可以跟任何可变的CSS属性，加上时间，就可以让属性的改变呈现出逐渐变化的东西效果，而不是唰一下完成，通常一次性的动画，可以用这个属性，配合js修改达到动画效果；另外，这个属性有一个值是all，设置这个值，那就说改啥属性，都渐变了；

@keyframes和animation: 前者是定义动画的（具体不阐述了），后者是用来加载的动画的，可以设置多次动画效果，但二者使用时都要注意加前缀。另外，transition属性在加载@keyframes制作的动画时是没有作用的，这两个是完成不同动画所需的不同属性，二者具备其一即可。

动画实现

动画属性就是那么几个，很好记，但是实际操作起来，难度会随着你想实现的动画效果而上升，所以动画如果过于复杂，建议还是寻求其他方式。下面用部分代码实际阐述一下3D效果的实现：

旋转动画：

1. 主容器

#loading-part {
	background-color: #400000;
	-webkit-perspective: 1000px;
	perspective: 1000px;  /*加入视角，3D必须*/
	padding: 5% 5% 0;
}

2. 动画元素

#logo-img {
	-webkit-transform-style: preserve-3d; /*3D变化形式，必须属性*/
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	opacity: 0;
	z-index: 2;
}

3. @keyframes动画实现

/*这里只展示不带前缀的，实际中要加上，动画的意思是5s内慢慢出现，不断旋转，先放大后缩小，最后消失*/

.animation {
	-webkit-animation: change 5s 1 ease-in-out;
	-moz-animation: change 5s 1 ease-in-out;
	-o-animation: change 5s 1 ease-in-out;
	animation: change 5s 1 ease-in-out;
}

@keyframes change {
	0% {
		opacity: 0;
		transform: rotateX(0) scale(1);
	}
	50% {
		opacity: 1;
		transform: rotateX(720deg) scale(2);
	}
	100% {
		opacity: 0;
		transform: rotateX(1080deg) scale(0);
	}
}

如此，将animation类添加到#log-img元素上，就可以呈现3D旋转效果了。

另外一个是打开的动作，主容器不变，还是上面的：

1. 动画元素

.door {
	background-color: #b10000;
	border: 3px solid #baa448;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: all 4s;
	transition: all 4s;  /*设置过渡属性*/
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);  /*设置初始位置*/
	position: relative;
}

#left-door {
	transform-origin: left; /*左边为轴*/
}

#right-door {
	transform-origin: right;/*右边为轴*/
}

2. 最终位置

.open-left {
	transform: rotateY(-180deg); /*左边打开*/
}

.open-right {
	transform: rotateY(180deg);/*右边打开*/
}

配合js，将最终位置的类直接加载到元素上，则由于transition属性的作用，也将呈现逐渐打开的动画。

进入动画：

1. 主容器

#out-part {
	background-color: #4EB0FD;
	height: 95%;
	border: 5px solid #baa448;
	-webkit-perspective: 1000px;  /*视角设置*/
	perspective: 1000px;
	-webkit-transition: all 4s;
	transition: all 4s;   /*过渡设置*/
}

2. 动画

.goin-door {
	transform: translateZ(999px); /*z轴前移999px，注意视角的值，如果等于或超过了，就看不见了*/
	background-color: #FFFFFF;
}

同样配合js，将动画类直接加载到元素上，z轴距离和视角的关系，将看到一个元素被放大的动画，产生一种进入的效果。

小结

以上是三种简要介绍自己实现的动画加载页面的方法，总的来说，主要就是配合使用各个动画属性，分清楚自己要写的主容器和动画元素，另外配合js的使用，可以使用定时器来帮助加载各种类样式。最主要的就是：知道自己的动画层次，头脑清晰的去部署完成动画需要的一切。

ps:改版后的新网站已经上线，开场动画就是如上方式制作，大家可以看看，网站地址：https://www.lakenqi.cn/，欢迎大家捧场！