css3中的变形

Chrome和safai需前缀加-webkit-，Foxfire需加前缀-moz-

1,旋转 rotate()

div{

width: 300px

height: 300px

transform:rotate(20deg)

}

2,扭曲 skew()

div {

width: 300px

height: 300px

transform:skew(45deg,-10deg)

}

3,缩放 scale()

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

也可以只缩放 x轴，或只缩放y轴。

div {

width: 200px

height: 200px

background: orange

}

.wrapper div:hover {

opacity: .5

transform: scale(0.8)

}

4,位移 translate()

translate()函数可以将元素向指定的方向移动，类似于position中的relative。

或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，

而不影响在X、Y轴上的任何Web组件。

5，原点 transform-origin

CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。

但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素

原点不在元素的中心位置，以达到需要的原点位置。

div {

transform: skew(45deg)

transform-origin:top

}

6,过渡

div {

width: 200px

height: 200px

background: red

margin: 20px auto

-webkit-transition-property: all

transition-property: all //指定过渡或动态模拟的css属性 （all是指所有）

-webkit-transition-duration:5s

transition-duration:5s //指定完成过渡的时间

-webkit-transition-timing-function: linear

transition-timing-function: linear//指定过渡的函数 linear/ease/ease-in/ease-out/ease-in-out/cubicbezier(n,n,n,n) n为0-1

-webkit-transition-delay: .18s

transition-delay:.18s //指定开始出现的延迟时间

}

div:hover {

width: 400px

height:400px

}

7，Keyframes被称为关键帧，css3中以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{...}”

@keyframes changecolor{

0%{

background: red

}

20%{

background:blue

}

40%{

background:orange

}

60%{

background:green

}

80%{

background:yellow

}

100%{

background: red

}

}

div {

width: 300px

height: 200px

}

div:hover {

animation: changecolor 5s ease-out .2s

}

等价于

div:hover{

animation-name:changecolor

animation-duration:5s

animation-timing-function:ease-out

animation-delay:1

animation-iteration-count:infinite//动画播放次数 整数。

animation-play-state:paused//主要用来控制元素动画的播放状态。

animation-direction:alternate//动画方向，normal每次循环向前，alternate偶次向前，奇数相反。

animation-fill-mode: both//设置动画时间外属性none、forwards、backwords和both

}

一、首先学习的是transition属性（zoom不支持transition,适用于具体数值的属性值变化或者背景图的变换）

transition 过渡 作为一个复合属性

1.transition-property 指定可以过渡的属性

默认值是all 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

2.transition-duration 指过渡完成的时间

默认值为0s

3.transition-timing-function 过渡的动画类型

默认值为ease

ease 规定慢速开始，然后变快，之后慢速结束的过渡效果

ease-in 规定以慢速开始的过渡效果

ease-out 规定以慢速结束的过渡效果

ease-in-out 规定以慢速开始和结束的过渡效果

linear 规定以相同速度开始至结束的过渡效果

cubic bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值

4.transition-delay 延迟执行过渡的时间

默认值为0s

二、transform属性

transform 向元素应用2D或3D转换 只对block级元素生效

1.translate 位移

translateX() 在x轴上发生位移或者变形

translateY() 在y轴上发生位移或者变形

translate(x,y) 在x轴 ，y轴上发生位移或者变形 当只有一个值的时候，只有x轴生效

2.scale 缩放

scaleX() 设置在x轴上发生缩放

scaleY() 设置在y轴上发生缩放

scale(x,y) 设置在x轴，y轴上发生缩放 当只有一个值的时候，x，y轴都发生缩放可以设置负数 使用场景：设置小于12px的字体

3.rotate 旋转 2d旋转 设置元素在2d平面旋转（z轴），正数按顺时针，负数按逆时针

rotateX（）设置沿x轴旋转

rotateY () 设置沿y轴旋转

4.skew 倾斜

skewX 绕x轴发生倾斜

skewY 绕y轴发生倾斜

skew(x,y) 绕x,y轴发生的倾斜 x轴和y轴和我们理解的相反，常用于平行四边形图案

三、transform-origin: 设置旋转元素的基点位置

transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；

因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。

但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。

下面我们主要来看看其使用规则：

transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom 。

语法：-moz-transform-origin: [ | | left | center | right ][ | | top | center | bottom ] ?

transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,center,bottom等描述性参数

top left | left top 等价于 0 0；

top | top center | center top 等价于 50% 0

right top | top right 等价于 100% 0

left | left center | center left 等价于 0 50%

center | center center 等价于 50% 50%（默认值）

right | right center | center right 等价于 100% 50%

bottom left | left bottom 等价于 0 100%

bottom | bottom center | center bottom 等价于 50% 100%

bottom right | right bottom 等价于 100% 100%

过渡使用 trainsition 属性，让元素的样式变化，不再瞬间完成，而是可以设定时间，在时间段内逐渐完成。

对单独的div元素做分别做设置进行属性说明：

1、设置在3秒内完成颜色的变化

2、可以分别对不同的属性分开做时间长度的设定，记得用逗号隔开

3、延迟delay：想在某个属性开始执行样式变化后的多少秒，才让另一个属性开始进行样式的动态变化，就可以使用延迟。用法就是：

2s 1s width ,意思就是在高度开始发生变化后的1s后，width的宽度才开始展现变化，然后在2s内完成宽度从30px到60px的变化。

delay的真正意义在于，它指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果

3、变化的速度：默认不设定，就是逐渐放慢的，默认值是ease

还可以额外指定设置：

linear:匀速

ease-in：加速

ease-out：减速

上述的三个情况，可以综合写为：

对应的变化就是，div的宽度瞬间变化为60px,然后高度在宽度变化后的1s之后才开始发生变化，在3秒内逐渐加速完成。

重点：

兼容性：各大浏览器基本已经支持无前缀的transition，所以可以直接使用不加前缀；

transition的变化设置，是只对有明确数值设置变化的，对于none,block这类的文字描述无效；

有效性：transition是一次性的，无法重复，除非反复触发。

1、相比于过渡属性transition的设置，动画animation的实现支持更为复杂的动态样式效果。

对单独的div元素做分别做设置进行属性说明：

1、使用animation动画属性，最重要的就是配合有“关键帧”——@keyframes

样式设置如下：

这样的设置，就是将1s分为3帧，每帧显示不同的背景颜色，然后动画效果只显示1次。

注意动画执行完成之后，就恢复元素原来定义的样式设置,如果原来没有这个样式的定义，那也是动画执行完成后恢复没有的状态。

@keyframes的写法比较松泛：

0%等同于from,100%等同于to：

如上面的写法就等同于：

下面的关键帧的写法也是有效的：

当然，（1）也是有延迟效果的设置：设置延迟多少秒后执行动画

（2）每帧之间是平滑过渡的，当然也可以设置为分步过渡，这样就有卡顿的效果：

解释：该动画，在停留1秒后开始执行，执行3次，每次执行时间为2秒，在2秒时间执行完成rainbow定义的关键帧样式，然后分步执行，有卡顿效果。

2、动画持续：动画效果默认只播放一次，加入infinite关键字，可以让动画无限次播放

3、指定动画播放的次数，直接写数值：

4、如果想要让动画结束后，停留在结束状态的样式，而不是默认变为起始状态，就可以添加关键字：

animation-fill-mode属性：

none：默认值，回到动画没开始时的状态

forwards：让动画停留在结束状态

backwards：让动画回到第一帧的状态

4、如果想要将帧数的设置，反向执行，就可以使用animation-direction属性：

normal：动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放

reverse：动画执行，先从结束帧的样式执行跳回到起始帧的样式。例如：

所有的transform属性设置，都不会改变元素占据的位置，还是保留的

1、旋转rotate

通过rotate设置旋转角度，来旋转元素

以div元素为例:

···

<body>

<div class="transform"></div>

</body>

···

2、位移translate

设置X轴、Y轴方向的位移值

设置X轴方向的位移值

设置Y轴方向的位移值

3、缩放scale

设置元素水平方向和垂直方向同时缩放

设置元素水平方向缩放

设置元素垂直方向缩放

只设置一个参数，设置元素水平方向和垂直方向，同一比例同时缩放

4、扭曲：skew，设置元素的平面XY轴的扭曲角度

设置元素X轴，Y轴的扭转角度

只设置一个参数，元素X轴，Y轴的扭转角度相同

设置元素X轴的扭转角度

设置元素Y轴的扭转角度

---