(前两次作业都很敷衍,稍微看了一下,没有总结....)
知识点总结:
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不旋转,后一个参数是角度。