标签：safari 元素 css oct :hover trident 使用 firefox web
1.2D，3D转换
-1.通过2D，3D转换，我们能够对元素进行移动，缩放，转动，拉长，或拉伸。
转换是使元素改变形状，尺寸和位置的一种效果。
可以使用2D或者3D转换来转换元素。
-2.2D(transform)转换方法
1.translate（x，y）移动，第二个参数未提供时默认为0
2.rotate（xdeg）旋转
3.scale（x，y）缩放
4.skew（xdeg，ydeg）倾斜，第二个参数未提供时默认为0
-3.3D转换方法
1.rotateX（）
2.rotateY（）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; background-color: aquamarine; } .change{ /**/ /*transform: translate(100px, 200px);*/ /*旋转*/ /*transform: rotate(30deg);*/ /*缩放*/ /*transform: scale(0.5, 0.5);*/ /*倾斜*/ /*transform: skew(50deg,50deg);*/ /*transform: rotateX(120deg);*/ transform: rotateY(120deg); } </style> </head> <body> <div>这是一个初始效果</div> <br/> <div class="change">变换后效果</div> </body> </html>
浏览器内核
Webkit（Chrome/Safari） -webkit-transform
Gecko（Firefox） -moz-transform
Presto（Oprea） -o-transform
Trident(IE) -ms-transform
2.过渡
1.通过css3，我们可以在不适用任何Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式
时为元素添加效果。
2.css3过渡是元素从一种样式逐渐改变为另一种的效果。
规定效果添加到哪个css属性上
规定效果的时长
transiton 简写属性，用于在一个属性中设置4个过渡属性
transition-property 规定应用过渡的css属性的名称，必须有
transition-duration 定义过渡效果花费的时间，默认为0，必须有
transition-timing-function 规定过渡效果的时间曲线，默认为“ease”
-1.linear：线性过渡，等同于贝塞尔曲线(0.0, 0.0, 1.0,1.0)
-2.ease:平滑过渡，等同于贝塞尔曲线(0.25，0.1,0.25，1.0)
-3.ease-in：由慢到快，等同于贝塞尔曲线（0.42,0.0,1.0,1.0）
-4.ease-out：由快到慢，等同于贝塞尔曲线(0.0，0.0，0.58，1.0)
-5.ease-in-out：由慢到快再到慢，等同于贝塞尔曲线（0.42，0.0，0.58，1.0）
transiton-delay 规定过渡效果何时开始，默认为0
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .first{ width: 100px; height: 100px; background-color: aquamarine; transition: width 2s ease-in-out; /*transition: background-color 2s;*/ } .first:hover{ width: 200px; /*background-color: purple;*/ } </style> </head> <body> <div class="first">效果</div> </body> </html>
标签：safari 元素 css oct :hover trident 使用 firefox web
原文地址：http://www.cnblogs.com/yangfanasp/p/7003917.html
