HTML5+CSS3+Web--day6

二）空间转换（3D转换）

空间：三维。 空间转换是元素在x、y、z三轴所构成的空间上的状态变换（z轴的位置与视线方向相同）

实现：属性名(transform)

1.平移

属性值：

translate3d(x,y,z) （x、y、z都不能差）

translateX()、translateY()、translateZ()

取值：（正负均可）

a.px

b.%(参照盒子自身大小计算)

视距（因为电脑是平面的因此元素在z轴上的变化默认情况下不能显示）

属性名：perspective（添加给父级）

作用：指定观察者与Z=0平面的距离（当这个距离为零时，z平面为电脑平面），为元素添加透视效果（近大远小，近实远虚）

取值：800-1200（我的理解是将一开始的电脑平面向后推，制造一个平面与平面的距离-->也就是空间，那么在z轴上的变化就能在这个制造出来的空间中显示了，距离越大空间越大，人眼最舒适的观察视角便是800-1200）

2.旋转(单位deg)

transform:rotate3d(x,y,z,角度度数):用来设置自定义旋转轴的位置及旋转角度，x、y、z取值0-1之间的数字。（了解）

transform:rotateZ();

transform:rotateX();

transform:rotateY();!注意x、y轴的旋转效果想要看见需要给父级加视距，当然若给父级设置了transform-style:preserve-3D;属性，就不用加视距了

确定旋转值正负方法：

左手法则--根据旋转方向确定取值正负

（1）分析元素旋转轴

（2）用左手以图例形式握住旋转轴（大拇指指向旋转轴正方向）

（3）按元素旋转方向同样旋转左手，若方向与弯曲四指朝向相同则为正，若相反则为负。

3.立体呈现

（点成线，线成面，面成体）在html中一个父级两个面就能形成体

属性名：transform-style

作用：设置元素的子元素是位于3D空间中还是平面中

属性值：

flat（默认）：子级处于平面中

preserve-3d：子级处于3D空间（给父级设置）

实现立体效果：

（1）立体方块前后有内容

（2）前上有内容

想要观察到以下需要将父级容器进行旋转！（旋转度数参考值为下图）

注：a.由衷觉得空间感极其重要，随着旋转观察图像，找准x、y、z轴决定着移动是否正确，

（小技巧：z轴默认状态下是面朝电脑的方向，每次旋转时，在确定旋转轴后就可以通过这个特性找到z轴，剩一轴就不言而喻了）

b.注意translate属性值要写在所有属性值的前面。（若在之前后写translate的变化，那么注意在之后写动态效果时用到Transform属性，都必须先加上之前的translate变化）

c.其他面上内容也可通过添加子级 旋转，平移得到。

d.在子级上设置x,y,z轴上的旋转属性时，互不影响的原因是：立方体的每个面都有独立的坐标轴。

4.缩放

属性名：transform

属性值：

scale3d(x,y,z)

scaleX()、scaleY()、scaleZ()

取值大于1-->放大；取值小于1-->缩小

5.animation-动画（元素多种形态的变化且不用鼠标悬停）

属性名：animation

属性值：动画名 动画时长（s）速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态

注：加粗的必写，不分先后，如果后两个时间值，第一个时动画时长

定义动画方法：

（1）from... to...形式：

（2）百分号形式：（百分比表示的意思是动画时长的百分比）

速度曲线：动画运动的速度（linear、steps常用）

重复次数：取值为数字，若想无限循环，则用infinite

动画方向：alternate可是实现动画的来回交替播放

执行完毕时状态：backwards是默认值为停在开始状态，forwards属性值可使动画停留在终止时的状态

多组动画：animation:动画1,动画2,动画N;

示例：

（1）走马灯效果：

无缝衔接动画原理：复制开头图片到结尾位置（图片累加宽度等于区域宽度）

但是在衔接处有卡顿。

（2）精灵动画制作*（css精灵图加上动画效果(steps分布动画)）

a.准备显示区域：盒子尺寸与一张精灵小图尺寸相同（方便设置背景图进行抠图）

b.定义动画：移动背景图

c.使用动画（animation: run 1s steps(小图个数) infinite;）

注意：steps（N），N与精灵小图个数相同

经验总结：

如果动画开始状态与默认相同则可以省略