CSS缩放函数, 旋转函数与倾斜函数

   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：

   <div class="old33">
       <h3>原图</h3>
       <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"  width="150" height="150"/>
   </div>
   <div class="new33">
       <h3>对原图旋转45度</h3>
       <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg"  width="150" height="150"  style="margin-top:20px;"/>
   </div>

CSS：

 div.old33,div.new33 {
      margin:0 auto;
      position:relative;
      width:500px;
 }
 div.new33 img{
      -webkit-transform:rotate(45deg);
         -moz-transform:rotate(45deg);
           -o-transform:rotate(45deg);
              transform:rotate(45deg);
 }

原图

对原图旋转45度

*改变旋转中心点：transform-origin

       实例：

       HTML：

 <div class="transform-origin">
     <h3>默认使用中心点位置对元素进行旋转效果</h3>
     <div class="old">
         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
     </div>
 
     <h3>使用transform-origin来改变元素的中心点-使元素bottom成为元素的起点位置对元素进行旋转</h3>
     <div class="new">
         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
         <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
     </div>
     </div>

CSS：

 .transform-origin div {
         width: 500px;
         height: 300px;
         position: relative;
     }
     .transform-origin div img {
         position: absolute;
         top: 50px;
         left: 50px;
     }
     .transform-origin div img:nth-child(1){
         opacity: .5;
         z-index:;
         transform: rotate(10deg);
     }
     .transform-origin div img:nth-child(2){
         opacity: .6;
         z-index:;
         transform: rotate(25deg);
     }
     .transform-origin div img:nth-child(3){
         opacity: .7;
         z-index:;
         transform: rotate(35deg);
     }
     .transform-origin div img:nth-child(4){
         opacity: .8;
         z-index:;
         transform: rotate(45deg);
     }
     .transform-origin div img:nth-child(5){
         z-index:;
         transform: rotate(60deg);
     }
     .transform-origin .new img {
         transform-origin: bottom;
     }

默认使用中心点位置对元素进行旋转效果

使用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：

     <div class="transform-origin-skew">
         <h3>默认使用中心点位置对元素进行倾斜效果</h3>
         <div class="old">
             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
         </div>
 
         <h3>使用transform-origin来改变元素的中心点-使元素bottom成为元素的起点位置对元素进行倾斜</h3>
         <div class="new">
             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
             <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
         </div>
     </div>

CSS：

     .transform-origin-skew div {
         width: 500px;
         height: 300px;
         position: relative;
     }
     .transform-origin-skew div img {
         position: absolute;
         top: 50px;
         left: 50px;
     }
     .transform-origin-skew div img:nth-child(1){
         opacity: .5;
         z-index:;
         transform: skew(-10deg);
     }
     .transform-origin-skew div img:nth-child(2){
         opacity: .6;
         z-index:;
         transform: skew(-15deg);
     }
     .transform-origin-skew div img:nth-child(3){
         opacity: .7;
         z-index:;
         transform: skew(-20deg);
     }
     .transform-origin-skew div img:nth-child(4){
         opacity: .8;
         z-index:;
         transform: skew(-25deg);
     }
     .transform-origin-skew div img:nth-child(5){
         z-index:;
         transform: skew(-30deg);
     }
     .transform-origin-skew .new img {
         transform-origin: bottom;
     }

演示demo:

默认使用中心点位置对元素进行倾斜效果

使用transform-origin来改变元素的中心点-使元素bottom成为元素的起点位置对元素进行倾斜

（感谢-空智）