CSS3学习手记（6） CSS3装换 2D转换
CSS 2D转换
- CSS3 rotate() 旋转
- CSS3 translate() 平移
- CSS3 scale() 缩放
- CSS3 skew() 扭曲或斜切
- CSS3 matrix() 矩阵或混合
旋转rotate
通过指定的角度参数对原元素指定一个2D rotation(2D旋转 )
语法：transform:rotate(<angle>)
参数说明：angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;list-style-type: none;} a,img{border: 0;} body{font:12px/180% Arial;} .main{width: 1000px;margin: 50px auto;position: relative;} .pic{width: 300px;height: 290px;border: 1px solid #ccc; background: #fff;box-shadow: 2px 2px 3px #aaa} .pic1{transform:rotate(7deg)} .pic2{transform:rotate(-8deg)} .pic3{position: absolute;top:40px;left: 350px;z-index: 2;transform: rotate(-35deg)} .pic4{position: absolute;top: 360px;left: 350px;z-index: 3;transform: rotate(35deg)} .pic5{position: absolute;top: 360px;left:350px;z-index: 4;transform: rotate(60deg)} .pic6{position: absolute;top: 180px;left: 280px;z-index: 5;transform: rotate(-60deg)} </style> </head> <body> <div class="main"> <div class="pic pic1"><img src="images/1.jpg" style="width:300px;height:200px"><p>2D装换</p></div> <div class="pic pic2"><img src="images/3.jpg" style="width:300px;height:200px"><p>2D装换</p></div> <div class="pic pic3"><img src="images/4.jpg" style="width:300px;height:200px"><p>2D装换</p></div> <div class="pic pic4"><img src="images/5.jpg" style="width:300px;height:200px"><p>2D装换</p></div> <div class="pic pic5"><img src="images/7.jpg" style="width:300px;height:200px"><p>2D装换</p></div> <div class="pic pic6"><img src="images/1.jpg" style="width:300px;height:200px"><p>2D装换</p></div> </div> </body> </html>
移动translate（X轴的坐标原点在左边，Y轴的坐标原点在上边）
translate()方法，根据左轴（X轴）和顶部（Y轴）位置给定参数，从当前元素位置移动
- translateX(x) 仅水平方向移动（X轴移动）
- translateY(y) 仅垂直方法移动（Y轴移动）
- translate(x,y) 水平方向和垂直方向同时移动
translateX
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{width: 1000px;height: 250px;background: #abcdef;margin: auto;} div>img{transform: translateX(200px)} </style> </head> <body> <div><img src="images/1.jpg" style="width:100%;height:100%"></div> </body> </html>
translateY(y)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{width: 1000px;height: 250px;background: #abcdef;margin: auto;} div>img{transform: translateY(200px)} </style> </head> <body> <div><img src="images/1.jpg" style="width:100%;height:100%"></div> </body> </html>
translate(x,y)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{width: 1000px;height: 250px;background: #abcdef;margin: auto;} div>img{transform: translate(100px,200px)} </style> </head> <body> <div><img src="images/1.jpg" style="width:100%;height:100%"></div> </body> </html>
缩放scale（水平和垂直方向的坐标原点在中心）
scale()方法，指定对象的2D scale(2D 缩放)
- scaleX(x) 元素仅水平方向缩放（X轴缩放）
- scaleY(y) 元素仅垂直方向缩放（Y轴缩放）
- scale(x,y) 是元素水平方向和垂直方向同时缩放
scaleX
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{width: 1000px;height: 250px;background: #abcdef;margin: auto;} div>img{transform:scaleX(.5)} </style> </head> <body> <div><img src="images/1.jpg" style="width:100%;height:100%"></div> </body> </html>
scaleY(y)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{width: 1000px;height: 250px;background: #abcdef;margin: auto;} div>img{transform:scaleY(.5)} </style> </head> <body> <div><img src="images/1.jpg" style="width:100%;height:100%"></div> </body> </html>
scale(x,y)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{width: 1000px;height: 250px;background: #abcdef;margin: auto;} div>img{transform:scale(.5,.5)} </style> </head> <body> <div><img src="images/1.jpg" style="width:100%;height:100%"></div> </body> </html>
扭曲skew（逆时针斜切）
skew()方法，指定对象斜切扭曲
- skewX(x) 仅使元素在水平方向扭曲变形（X轴扭曲变形）
- skewY(y) 仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
- skew(x,y) 使元素水平和垂直方向同时扭曲
skewX(x)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{width: 500px;height: 200px;background: #abcdef;margin: auto;} div>img{transform:skewX(35deg)} </style> </head> <body> <div><img src="images/1.jpg" style="width:100%;height:100%"></div> </body> </html>
skewY(y)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{width: 500px;height: 200px;background: #abcdef;margin: auto;} div>img{transform:skewY(35deg)} </style> </head> <body> <div><img src="images/1.jpg" style="width:100%;height:100%"></div> </body> </html>
skew(x,y)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{width: 500px;height: 200px;background: #abcdef;margin: auto;} div>img{transform:skew(15deg,10deg)} </style> </head> <body> <div><img src="images/1.jpg" style="width:100%;height:100%"></div> </body> </html>
