2D转换
在css中的2D效果分别是平移、缩放、倾斜和旋转。而达到2D效果离不开的就是
transform属性。transform属性基本语法如下：
transform：none | transform-function；
1.平移
通过transform属性中的translate方法，定义X轴Y轴坐标。基本语法如下：
transform：translate（x-value，y-value）；
上面效果是通过translate方法将第二个div沿着X轴方向移动100像素，沿着Y轴方向移动30像素，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div { width: 100px; height: 50px; background: pink; border: 1px solid black; } #div2 { transform: translate(100px,30px); -ms-transform: translate(100px,30px); -webkit-transform: translate(100px,30px); -moz-transform: translate(100px,30px); -o-transform: translate(100px,30px); } </style> </head> <body> <div>原来</div> <div id="div2">现在</div> </body> </html>
2.缩放
通过transform属性中的scale方法，定义高度宽度缩放比例。基本语法如下：
transform：scale（x-axis，y-axis）；
上面效果是通过scale方法将第二个div的宽度放大2倍，高度放大3倍，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div { width: 100px; height: 50px; background: pink; border: 1px solid black; } #div2 { margin: 100px; transform:scale(2,3); -ms-transform: scale(2,3); -webkit-transform: scale(2,3); -moz-transform: scale(2,3); -o-transform: scale(2,3); } </style> </head> <body> <div>原来</div> <div id="div2">现在</div> </body> </html>
3.倾斜
通过transform属性中的skew方法，定义X轴Y轴坐标倾斜的角度。基本语法如下：
transform：skew（x-angle，y-angle）；
上面效果是通过skew方法将第二个div沿X轴倾斜30°，沿Y轴倾斜10°，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div { width: 100px; height: 50px; background: pink; border: 1px solid black; } #div2 { transform: skew(30deg, 10deg); -ms-transform: skew(30deg, 10deg); -webkit-transform: skew(30deg,10deg); -moz-transform: skew(30deg,10deg); -o-transform: skew(30deg,10deg); } </style> </head> <body> <div>原来</div> <div id="div2">现在</div> </body> </html>
4.旋转
通过transform属性中的rotate方法，进行旋转，属性值度数正值为顺时针，负值为逆时针。基本语法如下：
transform：rotate（angle）；
上面效果是通过rotate方法将第二个div沿顺时针旋转30°，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div { width: 100px; height: 50px; background: pink; border: 1px solid black; } #div2 { transform: rotate(30deg); -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); } </style> </head> <body> <div>原来</div> <div id="div2">现在</div> </body> </html>
5.更改变换中心点
通过transform属性实现的效果都是以中心点为基准的，更改中心点将用到transform-origin属性，基本语法如下：
transform-origin：x-axis y-axis z-axis；
上面效果是通过rotate方法将div2、div3分别旋转45°，然后通过transform-origin属性更改div2原点坐标的位置，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #div1 { width: 200px; height: 200px; position: relative; margin: 100px auto; padding: 10px; background: pink; border: 1px solid black; } #div2 { padding: 20px; position: absolute; border: 1px solid black; background: lightblue; transform: rotate(45deg); -ms-transform: rotate(45deg); transform-origin: 20% 40%; -webkit-transform-origin: 20% 40%; -ms-transform-origin: 20% 40%; } #div3 { padding: 20px; position: absolute; border: 1px solid black; background: lightgreen; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } </style> </head> <body> <div id="div1"><div id="div2">更改后</div> <div id="div3">原来</div> </div> </body> </html>
