transform与transition区别

transform 【静态控制变形】

transform的属性包括&＃xff1a;rotate() / skew() / scale() / translate(,) &＃xff0c;分别还有x、y之分&＃xff0c;比如&＃xff1a;rotatex() 和 rotatey() &＃xff0c;以此类推。

transform:rotate()&＃xff1a;

含义&＃xff1a;旋转&＃xff1b;其中“deg”是“度”的意思&＃xff0c;如“10deg”表示“10度”下同。

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

transform:skew()&＃xff1a;

含义&＃xff1a;倾斜&＃xff1b;

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

transform:scale()&＃xff1a;

含义&＃xff1a;比例&＃xff1b;“1.5”表示以1.5的比例放大&＃xff0c;如果要放大2倍&＃xff0c;须写成“2.0”&＃xff0c;缩小则为负“-”。

.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

transform:translate()&＃xff1a;

含义&＃xff1a;变动&＃xff0c;位移&＃xff1b;如下表示向右位移120像素&＃xff0c;如果向上位移&＃xff0c;把后面的“0”改个值就行&＃xff0c;向左向下位移则为负“-”。

.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

transform综合&＃xff1a;

transform的常用属性就是这些了&＃xff0c;下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例&＃xff1a;

.demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
.demo_transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}

transition   【动态变化】

把鼠标指针放到 div 元素上&＃xff0c;其宽度会从 100px 逐渐变为 300px&＃xff1a;

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

transition 属性是一个简写属性&＃xff0c;用于设置四个过渡属性&＃xff1a;

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

浏览器支持情况&＃xff1a;

-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:40% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */

http://www.daqianduan.com/2959.html

http://www.daqianduan.com/example?pid&＃61;2959