Day16 CSS3 3D

1、 3D位移

在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。

translate3d()函数使一个元素在三维空间移动。语法：translate3d(tx,ty,tz)

tx：代表横向坐标位移向量的长度；

ty：代表纵向坐标位移向量的长度；

tz：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。

语法：translateZ(t)

translateZ()函数的功能是让元素在3D空间沿Z轴进行位移。

t：指的是Z轴的向量位移长度。

2、 3D旋转

在三维变形中，我们可以让元素在任何轴旋转。为此，CSS3新增三个旋转函数：rotateX()、rotateY()、rotateZ()和rotate3d(x,y,z,a)。

rotateX(a)

rotateX()函数指定一个元素围绕X轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕X轴顺时针旋转；反之，如果值为负值，元素围绕X轴逆时针旋转。

rotateY(a)

rotateY()函数指定一个元素围绕Y轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素绕Y轴顺时针旋转；反之，如果值为负值，元素围绕Y轴逆时针旋转。

rotateZ(a)

rotateZ()函数和其他两个函数功能一样的，区别在于rotateZ()函数指定一个元素围绕Z轴旋转。

rotate3d(x,y,z,a)(建议取值0或1)

x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；

y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；

z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；

a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

3.3D缩放

CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数.

scaleZ(s)

s：指定元素每个点在Z轴的比例。

scale3d(sx,sy,sz)

sx：横向缩放比例；

sy：纵向缩放比例；

sz：Z轴缩放比例；

transform:scale3d(1,0.5,1.3);

4.CSS3 动画

keyframe创建动画规则:

@keyframes mymove{

from{初始状态属性}

to{结束状态属性}

}或

@keyframes mymove{

0%{初始状态属性}

100%{结束状态属性}

}（中间再可以添加关键帧）

 

animation属性

animation复合属性。检索或设置对象所应用的动画特效。

1.animation-name 检索或设置对象所应用的动画名称

2.animation-duration 检索或设置对象动画的持续时间

3.animation-timing-function 检索或设置对象动画的过渡类型

说明：

linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

step-start:在变化过程中，是以下一帧的显示效果来填充间隔动画

step-end与上面相反，都是以上一帧的显示效果来填充间隔动画

steps(3,start):它可以传入两个参数，第一个是一个大于0的整数，他是将间隔动画等分成指定数目的小间隔动画，然后根据第二个参数来决定显示效果。

4.animation-delay 检索或设置对象动画延迟的时间

5.animation-iteration-count 检索或设置对象动画的循环次数说明：animation-iteration-count: infinite | number;infinite：无限循环number: 循环的次数

6.animation-direction 检索或设置对象动画在循环中是否反向运动

说明：

normal：正常方向

reverse：反方向运行

alternate：动画先正常运行再反方向运行，并持续交替运行

alternate-reverse：动画先反运行再正方向运行，并持续交替运行

7.animation-play-state 检索或设置对象动画的状态

说明：

animation-play-state:running | paused;

running:运动

paused: 暂停

8.animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式.

none为默认值，在动画执行前和动画执行后，对元素的样式不会产生影响

forwards:动画结束后，元素的样式将设置为动画的最后一帧的样式

backwards:动画开始前，元素的样式将设置为动画的第一帧的样式

both:同时使用forwards和backwards两个属性值的效果。 动画执行前是动画第一帧的效果，动画执行后是动画最后一帧的效果。

animation和transition的区别

相同点：都是随着时间改变元素的属性值。

不同点：transition需要触发事件(hover事件或click事件等)才会随时间改变其css属性；

而animation在不需要触发任何事件的情况下随着时间变化来改变元素css的属性值，从而达到一种动画的效果。

 

5，Backface-visibility

Backface-visibility:visible;可见

Backface-visibility:hidden;不可见

说明：定义当元素不面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时，该属性很有用。