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

2022-01-12 02:13:12

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成为元素的起点位置对元素进行倾斜

（感谢-空智）

码农公寓

原图

先对其左右翻转，对x轴放大2倍，对Y轴放大2倍

使用transform-origin对transform：scale元素进行重置原点位置

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

使用transform-origin来改变元素的中心点-使元素left成为元素的起点位置对元素进行缩放

原图

对原图旋转45度

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

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

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

3：倾斜

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

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

相关文章