CSS3中的变形处理

html-css011

CSS3中的变形处理,第1张

在CSS3中,可以利用 transform 功能来实现文字或图像的旋转、缩放、倾斜和移动着4种类型的变形处理。

在CSS3中,通过 transform 属性来使用 transform 功能。

使用 rotate 方法,在参数中加入角度值,角度值后面跟表示角度单位的 deg 文字即可,旋转方向为顺时针旋转。

运行效果:

使用 scale 方法来实现文字或图像的缩放处理,在参数中指定缩放倍率。

上面的示例使 div 元素缩小了50%。

另外,可以分别指定元素水平方向的放大倍率与垂直方向的放大倍率。

上面的示例使 div 元素水平方向缩小了50%,垂直方向放大了一倍。

效果如图:

使用 skew 方法来实现文字或图像的倾斜处理,在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

上面的示例使 div 元素水平方向上倾斜了30度,垂直方向上倾斜了30度。

效果如图:

另外, skew 方法中的两个参数可以修改成只使用一个参数,省略另一个参数,这种情况下视为只在水平方向上进行倾斜,垂直方向上不倾斜。

使用 translate 方法来将文字或图像进行移动,在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

上面的示例把 div 元素水平方向上向右移动了 50px ,垂直方向上向上移动了 50px 。

另外, translate 方法中的两个参数可以修改成只使用一个参数,省略另一个参数,这种情况下视为只在水平方向上进行移动,垂直方向上不移动。

示例1:

效果如图:

示例2:

效果如图:

这两个示例都是对同一个页面中同一个元素进行多重变形的示例, 而且各种变形方曲中所使用的参数也都相同,差别只是使用三种变形方法的先后顺序不一样。但,元素在两个页面上所处位置并不相同。说明 transform 参数的顺序不同,结果可能会不一样。

在使用 transform 方融进行文字或图像的变形时,是以元素的中心点为基准点进行的。使用 transform-origin 属性,可以改变变形的基准点。

接下来,我们使用 transform-origin 属性把变形的基准点修改为第二个元素的左下角处。

运行效果:

transform-origin 属性的两个参数分别代表:基准点在元素水平方向上的位置,基准点在元素垂直方向上的位置,其中"基准点在元素水平方向上的位置"中可以指定的值为 left 、 center 、 right , "基准点在元素垂直方向上的位置"中可以指定的值为 top 、 center 、 bottom 。

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

}