form-…

过渡动画一、transition属性二、transform属性-2D变换2.1

tanslate

过渡是元素从一种样式逐渐改变为另一种的效果.它主要通过transition四个过渡属性来控制transition-property、transition-duration、transition-timing-function、transition-delay四个属性也可以合并简写成:

transition:

属性改变时过渡效果将开始)transition-property:

none

所有属性都将获得过渡效果property定义应用过渡效果的CSS

transition-duration:

3、transition-timing-function缓动函数

linear:

(cubic-bezier(0.25,0.1,0.25,1))

ease-in:

initial-scale1.0titleDocument/titlestyle/*

transition

initial-scale1.0titleDocument/titlestyle.box{width:200px;height:

200px;background:

translate(100px,100px);}.rotate{transform:

rotate(30deg);}.scale{transform:

skew(-50deg);}/style

classtranslate-btntranslate/buttonbutton

classrotate-btnrotate/buttonbutton

classscale-btnscale/buttonbutton

classskew-btnskew/button/divscriptvar

box

document.querySelector(.box)var

translate

document.querySelector(.translate-btn)var

rotate

document.querySelector(.rotate-btn)var

scale

document.querySelector(.scale-btn)var

skew

document.querySelector(.skew-btn)translate.onclickfunction(){box.className

box

translate}rotate.onclickfunction(){box.className

box

rotate}scale.onclickfunction(){box.className

box

scale}skew.onclickfunction(){box.className

box

关键帧动画通过对关键帧的指定来在页面上产生更复杂的动画效果以方便制作逐帧动画。

动画名”来定义关键帧通过animation属性来设置动画信息animation:

name

指定要绑定到选择器的关键帧的名称keyframes名,必填项animation-duration:

时长,单位秒或毫秒animation-timing-function:

延迟时间单位可以是秒s或毫秒msanimation-iteration-count:

值类型n(数字|

normal|reverse|alternate|alternate-reverse|initial|inherit;reverse:

动画反向播放alternate:

动画在奇数次1、3、5…正向播放在偶数次2、4、6…反向播放。

alternate-reverse:

动画在奇数次1、3、5…反向播放在偶数次2、4、6…正向播放。

initial:

animation-fill-mode:

规定当动画不播放时当动画完成时或当动画有一个延迟未开始播放时要应用到元素的样式。

可选值none|forwards|backwards|both|initial|inherit;forwards:

结束时停在最后一帧backwards:

initial-scale1.0titleDocument/titlestyle.box{width:100px;height:

100px;background:

absolute;left:0;top:0;animation:

linear

{0%{left:0;}100%{left:300px;}}/style

/head

3D的世界里也要找到并创建这三个物件要素不过因为在CSS世界里并没有摄影镜头、拍摄的环境的空间等这些真实世界拍摄需要的要素所以变成用div进行展现在对应的div

上头加入对应的style属性就可以进行模拟我们这里就必须要用到三层div最外层是摄影镜头第二层为立体空间第三层则是立体空间内的立体元素

4.1

perspective属性用来定义3D元素距视图的距离以像素计通常和perspective-origin属性一起使用perspective-origin属性可以改变3D元素的底部位置。

perspective-origin属性允许改变3D元素查看3D元素的视图;当为元素定义perspective属性时其子元素会获得透视效果而不是元素本身;perspective

属性只影响

控制子元素是否开启三维立体环境。

。

transform-style:flat子元素不开启3d立体空间

transform-style:

preserve-3d;子元素开启立体空间代码写给父级但是影响的是子盒子这个属性很重要后面必用

4.3

在CSS3中3D位移操作主要通过translatezO和translate3d0两个函数实现。

其中translate3d()函数使一个元素在三维空间移动。

其基本语法如下

其中各参数取值说明如下

tx;代表横向坐标位移向量的长度ty:代表纵向坐标位移向量的长度:tz:代表Z轴位移向量的长度。

该值不能是一个百分比值如果取值为百分比值将被认为是无效值。

4.4

在三维变形中可以让元素在任何轴上旋转。

CSS3新增4个旋转函数:

rotateX0、rotateXO函数允许rotateYO和rotateZ0。

一个元素围绕X轴旋转:rotateY0函数允许一个元素围绕Y轴旋转;rotatez()函数允许一个元素围绕Z轴旋转

rotateX(a)\rotateY(a)、rotateZ(a)Rotate3d(x,y,z,a)

rotate(1,0,0,3)

rotate(0,1,0,30deg)rotateY(30deg)

rotate(0,0,1,30deg)rotateZ(30deg)

4.5

·CSS3中3D缩放处理主要通过scalez0和scale3d(两个函数来实现。

当scale3d0中X轴和Y轴同时为1即scale3d1,1,sz)其效果等同于scaleZ(sz)。

通过使用3D缩放函数可以让元素在Z轴上按比例缩放。

默认值为1当值大于1时元素放大反之小于

SX横向缩放比例;

不管是2D变形还是3D变形都可以使用多重变形它们之间使用在CSS3中空格分隔具体语法如下:

transform:

其中transfrom-function是指CSS3中的任何变形函数。