1 :縮放
scale(x,y)函數讓元素根據中心原點對對象進行縮放,大於1進行放大,小於1則縮小,如果為負值,則先進行翻轉再進行縮放操作。
實例:
HTML:
<div class="old11"> <h3>原圖</h3> <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" width="150" height="150"/> </div> <div class="new11"> <h3>對x軸放大2倍,對Y軸放大2倍</h3> <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" width="150" height="150" style="margin-top:60px;"/> </div>
CSS:
div.old11,div.new11 { margin:0 auto; position:relative; width:500px; } .new11 img {position: absolute;} .new11 img{ -webkit-transform:scale(-2,2); -moz-transform:scale(-2,2); -o-transform:scale(-2,2); transform:scale(-2,2); }
原圖

先對其左右翻轉,對x軸放大2倍,對Y軸放大2倍

使用transform-origin對transform:scale元素進行重置原點位置
默認使用中心點位置對元素進行縮放效果





使用transform-origin來改變元素的中心點-使元素left成為元素的起點位置對元素進行縮放





2:旋轉
rotate(x)通過選定元素原點中心進行旋轉,正:順時針,負:逆時針(2d).
實例:
HTML:
1 <div class="old33"> 2 <h3>原圖</h3> 3 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" width="150" height="150"/> 4 </div> 5 <div class="new33"> 6 <h3>對原圖旋轉45度</h3> 7 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" width="150" height="150" style="margin-top:20px;"/> 8 </div>
CSS:
1 div.old33,div.new33 { 2 margin:0 auto; 3 position:relative; 4 width:500px; 5 } 6 div.new33 img{ 7 -webkit-transform:rotate(45deg); 8 -moz-transform:rotate(45deg); 9 -o-transform:rotate(45deg); 10 transform:rotate(45deg); 11 }
原圖

對原圖旋轉45度

*改變旋轉中心點:transform-origin
實例:
HTML:
1 <div class="transform-origin"> 2 <h3>默認使用中心點位置對元素進行旋轉效果</h3> 3 <div class="old"> 4 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 5 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 6 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 7 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 8 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 9 </div> 10 11 <h3>使用transform-origin來改變元素的中心點-使元素bottom成為元素的起點位置對元素進行旋轉</h3> 12 <div class="new"> 13 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 14 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 15 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 16 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 17 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 18 </div> 19 </div>
CSS:
1 .transform-origin div { 2 width: 500px; 3 height: 300px; 4 position: relative; 5 } 6 .transform-origin div img { 7 position: absolute; 8 top: 50px; 9 left: 50px; 10 } 11 .transform-origin div img:nth-child(1){ 12 opacity: .5; 13 z-index: 1; 14 transform: rotate(10deg); 15 } 16 .transform-origin div img:nth-child(2){ 17 opacity: .6; 18 z-index: 2; 19 transform: rotate(25deg); 20 } 21 .transform-origin div img:nth-child(3){ 22 opacity: .7; 23 z-index: 3; 24 transform: rotate(35deg); 25 } 26 .transform-origin div img:nth-child(4){ 27 opacity: .8; 28 z-index: 4; 29 transform: rotate(45deg); 30 } 31 .transform-origin div img:nth-child(5){ 32 z-index: 5; 33 transform: rotate(60deg); 34 } 35 .transform-origin .new img { 36 transform-origin: bottom; 37 }
默認使用中心點位置對元素進行旋轉效果





使用transform-origin來改變元素的中心點-使元素bottom成為元素的起點位置對元素進行旋轉





3:傾斜
skey(x,y):可以將元素以其中心位置圍繞着x軸與y軸按照一定角度進行傾斜。
實例:
HTML:
<h2>transform屬性-skew傾斜的demo</h2> <div class="skew"> <img src="http://m1.img.srcdd.com/farm5/d/2015/0228/22/FD9886C5434AC71115812ED3DB6409B9_B500_900_500_269.jpeg"/> </div>
CSS:
.skew img { -webkit-transform:skew(0deg); -moz-transform:skew(0deg); -o-transform:skew(0deg); transform:skew(0deg) transition:1s all linear; } .skew {
width:520px;
height:280px;
overflow:hidden;
} .skew img:hover {
-webkit-transform:skew(20deg);
-moz-transform:skew(20deg);
-o-transform:skew(20deg);
transform:skew(20deg)
}
演示傾斜demo.

使用transform-origin對transform:skew元素(傾斜)進行重置原點位置
實例:
HTML:
1 <div class="transform-origin-skew"> 2 <h3>默認使用中心點位置對元素進行傾斜效果</h3> 3 <div class="old"> 4 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 5 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 6 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 7 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 8 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 9 </div> 10 11 <h3>使用transform-origin來改變元素的中心點-使元素bottom成為元素的起點位置對元素進行傾斜</h3> 12 <div class="new"> 13 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 14 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 15 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 16 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 17 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" /> 18 </div> 19 </div>
CSS:
1 .transform-origin-skew div { 2 width: 500px; 3 height: 300px; 4 position: relative; 5 } 6 .transform-origin-skew div img { 7 position: absolute; 8 top: 50px; 9 left: 50px; 10 } 11 .transform-origin-skew div img:nth-child(1){ 12 opacity: .5; 13 z-index: 1; 14 transform: skew(-10deg); 15 } 16 .transform-origin-skew div img:nth-child(2){ 17 opacity: .6; 18 z-index: 2; 19 transform: skew(-15deg); 20 } 21 .transform-origin-skew div img:nth-child(3){ 22 opacity: .7; 23 z-index: 3; 24 transform: skew(-20deg); 25 } 26 .transform-origin-skew div img:nth-child(4){ 27 opacity: .8; 28 z-index: 4; 29 transform: skew(-25deg); 30 } 31 .transform-origin-skew div img:nth-child(5){ 32 z-index: 5; 33 transform: skew(-30deg); 34 } 35 .transform-origin-skew .new img { 36 transform-origin: bottom; 37 }
演示demo:
默認使用中心點位置對元素進行傾斜效果





使用transform-origin來改變元素的中心點-使元素bottom成為元素的起點位置對元素進行傾斜




