task3（css3的过渡和动画）

(前两次作业都很敷衍，稍微看了一下，没有总结....)

知识点总结：

1.属性perspective：在中文中意思是透视，视角；

 CSS3 3D transform的透视点是在浏览器的前方！

2.属性perspective-origin：即就是定义 3D 元素所基于的 X 轴和 Y 轴；

3.属性transform-style：其两个参数，flat | preserve-3d. 前者flat为默认值，表示平面的；后者preserve-3d表示3D透视；

4.属性backface-visibility：设置背后元素是否可见，一般设置hidden不可见；

5.transition:5s ease;设置动画时间和方式；

6.transform-origin:默认旋转轴是元素中心，改属性可以设置旋转轴；

demo：

1、六面体旋转

效果图: tzrong.github.io/task3/task3/cube.html

先创建一个六面体：（通过rotate（旋转） 和translate（平移）绘制六面体）

.front{background:#009999;

transform:translateZ(50px);}

.back{background:rgba(0,255,0,1);

transform:translateZ(-50px);}

.right{background:#ac2925;

transform:rotateY(90deg)translateZ(50px);}

.left{background:#2b542c;

transform:rotateY(-90deg)translateZ(50px);}

.top{background:#8a6d3b;

transform:rotateX(90deg)translateZ(50px);}

.bottom{background:#4cae4c;

transform:rotateX(-90deg)translateZ(50px);}

/*设置动画属性：动画名称，时间，速度，延迟时间，次数*/

animation:scroll2s linear1s infinite;

/*关键帧用来创建keyframes创建动画*/

@keyframesscroll{

100%{

transform:rotate3d(1,1,1,360deg);/*创建一个包含六面体的空间旋转动画*/

}

}

rotate3d前三个参数是设置绕x y x轴旋转，设为0不旋转，后一个参数是角度。