过渡 : 值元素从一种样式值逐渐改变为另一种样式值的效果
语法 transition: property duration timing-function delay
过渡名称 花费时间 过度时间曲线(可省略) 等待时间(可省略)–>时间有顺序
如果有多组属性变化，还是用逗号隔开。
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 单位 : s | |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 | |
| transition-delay | 规定过渡效果何时开始。默认是 0。 单位 : s |
如果想要所有的属性都变化过渡， 写一个all 就可以
例:transition: all 1s linear 2s;
过渡时间曲线值: linear匀速 ease先慢再快最后慢
ease-in 慢速 ease-out 先慢后快
案例:过渡小例子 装饰效果
注意:过渡需要用在自己身上
2D转换 transform
translate(x,y) 位移 横纵坐标 translateX(n) 沿着 X 轴移动元素
rotate(30deg) 旋转,可负值
scale() 缩放 里面的值是倍数 ,没有单位
skew() 倾斜 X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示 向相反方向倾斜
transform-origin : x y ; 旋转的基点 可写px 或 left,right 或%
3D 转换 transform
transform-style : preserve-3d; 显示3d舞台
perspective : 1000px; 规定 3D 元素的透视效果—>近大远小,只有设置,才有z轴
这两个样式需要设置在父元素里面,才能显示子元素的3d效果
透明度
Opacity : 取值0-1 即完全透明到完全不透明 文本和背景色都会受到影响
Background: rgba(r, g, b, a) ; a为alpha 不透明度 取值0-1之间 元素里面的文本不会受到影响
transform-origin : x y z ; 旋转的基点 可写px 或 left,right 或% –> z轴只能用px单位
位移: translateX() translateY() translateZ() translate3d()
旋转: rotateX() rotateY() rotateZ() rotate3d()
缩放: scaleX() scaleY() scaleZ() scale3d()
关于兼容: 目前支持的浏览器 Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+；
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */