Css3.Note之transform
2D转换 transform
*rotate()
|
1 2 3 4 5 6 |
div{ width:200px; height:100px; background-color:yellow; -webkit-transform:rotate(10deg); } |
div
Note
|
1 |
deg 为度，10deg即顺时针旋转10度，负值反之。 |
*translate()
|
1 2 3 4 5 6 7 8 9 10 11 |
div1{ width:200px; height:100px; background-color:yellow; } div2{ width:200px; height:100px; background-color:yellow; -webkit-transform:translate(10px,10px); } |
div1
div2
Note
|
1 |
两个参数分别是left 与 top的位移值 |
*scale()
|
1 2 3 4 5 6 7 8 9 10 11 |
div1{ width:200px; height:100px; background-color:yellow; } div2{ width:200px; height:100px; background-color:yellow; -webkit-transform:scale(2,2); } |
div1
div2
Note
|
1 |
以元素的中心位置为远点，缩放元素，两个参数分别是原来width的倍数和height的倍数 |
*skew()
|
1 2 3 4 5 6 7 8 9 10 11 |
div1{ width:200px; height:100px; background-color:yellow; } div2{ width:200px; height:100px; background-color:yellow; -webkit-transform:skew(20deg,20deg); } |
div1
div2
Note
请尊重我们的辛苦付出，未经允许，请不要转载 本站 的文章，鄙视各种无耻的采集行为！