CSS縮放函數, 旋轉函數與傾斜函數

本文轉載自查看原文 2016-08-30 18:46 1495 css3

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成為元素的起點位置對元素進行傾斜

（感謝-空智）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS3中的變形處理——transform功能（旋轉、縮放、傾斜、移動）圖像的縮放（圖像縮小和圖像放大旋轉傾斜）在CSS3中，可以利用transform功能來實現文字或圖像的旋轉、縮放、傾斜、移動這四種類型的變形處理 krpano實踐之全景圖縮放，旋轉，傾斜，自動旋轉，VR，全屏方法-js調用 WPF將圖片旋轉縮放 CSS之旋轉 CSS3-transform縮放 unity3d 模型旋轉、縮放、拖動 Android : SeekBar 實現圖片旋轉縮放 Matrix控制平移、旋轉和縮放的方法