css3过渡与转换的方法

这篇文章主要介绍“css3过渡与转换的方法”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“css3过渡与转换的方法”文章能帮助大家解决问题。

成都创新互联长期为上1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为叙永企业提供专业的成都网站制作、网站建设，叙永网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

一 css3过渡 转换

css3过渡(transition)允许我们在限定的时间内从一个属性值转变到另一个属性值.

●transition-property:指定要转换的属性

●transition-duration:指定转换发生的持续时间

●transition-timing-function:指定转换的速度在其持续时间内如何变化

●transition-delay:指定过渡效果的延迟(以秒为单位)

在下面的例子中,我们将transition属性设置为持续时间为5s的转换效果.并设置ease-in定时函数,该函数有淡入的效果.

css代码:

transition:transform 5s ease-in;

过渡效果可以应用于各种css属性,包括:背景颜色,宽度,高度,不透明度等等.

在下面的例子中,div元素的宽度和高度都是100px,并有一个红色的背景.我么为width属性指定一个过渡效果,持续时间为3s.

css代码:

div.transition{ width:100px; height:100px;background:red;color:white;transition:width 3s; }

div.transition:hover{ width:250px;}

效果如下:

如果你将光标悬停在div元素上,则会从左向右移动.

当光标被移出div元素时,它将逐渐变回原来的样式.

transition-timing-function属性指定过渡效果的速度曲线.

它可以有以下值:

ease:动画开始缓慢,然后加速(默认值)

ease-in:缓慢开始,然后加速,突然停止.

ease-out:快速启动,但减速停止.

ease-in-out:类似于缓解,但更加微妙的加速和减速.

linear:匀速转换

cubic-bezier()函数,它允许你在cubic-bezier(立方体-贝塞尔)函数中定义你自己的值.取值范围为0~1之间.

css代码:

transition-timing-function:cubic-bezier(0,0,1,1);

二 css3 transform:rotate()

css3中transform(转换)允许你翻转,旋转,缩放和倾斜元素.

transform(转换)是一种让元素更改形状,大小和位置的效果

css3支持2d和3d转换.

设置15deg的角度旋转(顺时针方向旋转),css代码如下:

transform:totate(15deg);

正值,顺时针旋转;负值,逆时针旋转.

三 css3 transform-origin,translate(),skew()

transition-origin(原点)属性允许你更改要转换元素的位置.该属性的默认值是50% 50%,对应于元素的中间.

在下面的例子中,我们将transform-origin属性和transform-ratate一起使用.x轴(水平)的原点从左侧设定为30%.

y轴(垂直)的原点从上方设定为80%.

css代码:

div.empty-div{position:relative;height:100px;width:100px;margin:30px;padding:10px;border:2px solid black;}

div.green-div{  padding:50px; position:absolute;background-color:LightGreen;border:2px  solid red;transform:rotate(15deg);transform-origin:30% 80%;}

0 0 与左上相同,100% 100%与右下相同.

transform-origin属性必须与transform属性一起使用.

translate()方法从当前位置移动一个元素(根据给定的x轴和y轴的参数).正值会将元素

向下推到其默认位置的右侧.而负值则会将元素向上并拖至其默认位置的左侧.

css代码:

transform:translate(120px,60px);

skew()通过给元素设置x轴和y轴的倾斜角度值来实现倾斜.

以下例子,沿着x轴将