css3 transform簡介 2D
css3 的變形屬性 transform
它使得元素在一個座標系統中變形。這個屬性包含一系列變形函式，可以移動、旋轉和縮放元素。
語法
transform: none | <transform-function> [<transform-function>]*
預設值
transform：none
相容性
IE10+、FireFox16、Chrome36、Safari9、Opera12.1
CSS 3 2D 轉換
CSS 3 rotate() 旋轉
CSS 3 translate() 平移
CSS 3 scale() 縮放
CSS 3 skew() 扭曲或斜切
CSS 3 2D 旋轉
語法
transform: rotate(<angle>)
引數說明
angle指旋轉角度，正數表示順時針旋轉，負數表示逆時針旋轉
如下，是使用rotate 製作一個看起來零落的照片集。
<head> <title>旋轉</title> <meta charset="utf-8"> <style type="text/css"> * {margin: 0; padding: 0; list-style-type: none;} 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} .pic img {margin:10px 0 0 8px; width: 285px;} .pic p {text-align: center;font-size: 20px;} .pic1 { -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -ms-transform: rotate(7deg); -o-transform: rotate(7deg); transform: rotate(7deg); } .pic2 { -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -ms-transform: rotate(-8deg); -o-transform: rotate(-8deg); transform: rotate(-8deg); } .pic3 { position: absolute; top: 40px; left: 350px; z-index: 4; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); transform: rotate(-35deg); } .pic4 { position: absolute; top: 360px; left: 350px; z-index: 3; -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); } .pic5 { position: absolute; top: 150px; left: 600px; z-index: 4; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); } .pic6 { position: absolute; top: 180px; left: 280; z-index: 5; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); } </style> </head> <body> <div class="main"> <div class="pic pic1"><img src="imgs/lion.png"><p>2D轉換</p></div> <div class="pic pic2"><img src="imgs/lion.png"><p>2D轉換</p></div> <div class="pic pic3"><img src="imgs/lion.png"><p>2D轉換</p></div> <div class="pic pic4"><img src="imgs/lion.png"><p>2D轉換</p></div> <div class="pic pic5"><img src="imgs/lion.png"><p>2D轉換</p></div> <div class="pic pic6"><img src="imgs/lion.png"><p>2D轉換</p></div> </div> </body>
CSS 3 2D 轉換
translate() 方法，根據左（X軸）和頂部（Y軸）位置給定的引數，從當前元素位置移動。
三種情況
translateX(x) 僅水平方向移動
translateY(y) 僅垂直方向移動
translate(x,y) 水平和垂直方向同時移動
語法
transform: transformX(<translation-value>)
transform: tramsform(tx[,ty])
其以父容器的左上角為原點，遠離原點為正。
<style type="text/css">
div {width: 1500px; height: 250px; background: #abcdef; margin:auto;}
div > img {
/*transform: translateX(200px);
transform: translateY(20px);*/
transform: translate(200px,100px);
}
</style>
</head>
<body>
<div>
<img src="imgs/lion.png">
</div>
</body>
css3 2d 轉換
縮放 scale
scale() 方法，指定物件的2D scale
三種情況
scaleX(x) 元素僅水平方向縮放
scaleY(x) 元素僅豎直方向縮放
scale(x，y) 元素水平和豎直方向同時縮放
語法
transform: scaleX(<number>);
transform: scale()
<style type="text/css">
div {width: 1500px; height: 250px; background: #abcdef; margin:auto;}
div > img {
/*transform: translateX(200px);
transform: translateY(20px);*/
transform: scaleX(0.5);
transform: scale(0.3,0.3);
}
</style>其中scale 縮放的原點為元素的中心。
css3 2d 轉換
扭曲 skew
skew() 方法，指定物件skew transformation
三種情況
skewX(x) 元素僅水平方向扭曲變形
skewY(x) 元素僅豎直方向扭曲變形
skew(x，y) 元素水平和豎直方向同時扭曲變形
語法
transform: skewX(<angle>);
transform: skew()
其中，角度，可以從-90deg 到 90deg.相當於模運算的效果。
<style type="text/css">
div {width: 800px; height: 250px; background: #abcdef; margin:auto;}
div > img {
transform: scale(0.3,0.3) skewX(15deg);
}
</style>