CSS 元素旋转缩放

transform: translate(20px,10px) 将元素水平右平移20px 向下平移10px

 

transform: translate3d(20px,10px，30px) 将元素水平右平移20px 向下平移10px，zIndex增加30px

 

transform: scale(0.5,2) 元素以中心，水平宽度乘0.5,高度乘2

 

transform:rotate(45deg) 元素中心为轴，顺时针旋转45度

 

transform-origin: 0% 0%; 根据这个比例分别乘以元素宽和高，得到一个点。在x轴 y轴找点，找到该点，旋转时根据此点旋转。

 

-webkit-transform:/* Safari 和 Chrome */ -moz-transform: /* Firefox */

 

div

{

width:100px;

height:100px;

background:blue;

transition:width 2s;改变宽高时有一个过渡效果

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

}

 

div:hover

{

width:300px;

}