transition详细笔记

1.Transition是css3中的新属性

-webkit-transition  增加谷歌浏览器支持

-moz-transition 增加火狐浏览器支持

-o-transition 增加opera浏览器支持

 

 

 

2.transition 属性是一个简写属性，用于设置四个过渡属性：

 

    transition-property 哪一个属性

    transition-duration 过度的时间

    transition-timing-function 过度模式

    transition-delay 延时

 

 

3.Transition-timing-function 支持的5种参数

 

Ease:缓慢进入缓慢退出，默认

Ease-in:缓慢进入

Ease-out:缓慢推出

Ease-in-out:缓慢进入缓慢退出

Linear:匀速

 

4.创建3D场景：

-webkit-perspective:

-webkit-perspective-origin:

使用transform属性调整元素 -webkit-transform-style:-webkit-preserve-3d(声名是3D)

-translate 位移

translateX

translateY

translateZ

-rotate 旋转

rotateX

rotateY

rotateZ

 

transform-origin:调整旋转中心，默认正中心。

x轴：left center right，

y轴：top，center，bottom，

z轴：length：px;