首页 > 代码库 > CSS缩放函数, 旋转函数与倾斜函数

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

2024-08-11 09:01:40   225人阅读

   1 ：缩放

       scale(x,y)函数让元素根据中心原点对对象进行缩放，大于1进行放大，小于1则缩小，如果为负值，则先进行翻转再进行缩放操作。

   实例：

    HTML：

   <div class="old11">       <h3>原图</h3>       <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg"  width="150" height="150"/>    </div>    <div class="new11">       <h3>对x轴放大2倍，对Y轴放大2倍</h3>       <img src="http://image.mamicode.com/info/201608/20180110205540853012.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);   }
<style></style>

原图

技术分享

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

技术分享

 

 

 

 

 

 

 

 

 

 

 

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

<style></style>
默认使用中心点位置对元素进行缩放效果
技术分享 技术分享 技术分享 技术分享 技术分享
使用transform-origin来改变元素的中心点-使元素left成为元素的起点位置对元素进行缩放
技术分享 技术分享 技术分享 技术分享 技术分享

 

    2：旋转

    rotate(x)通过选定元素原点中心进行旋转，正：顺时针，负：逆时针（2d).

实例：

      HTML：

1   <div class="old33">2       <h3>原图</h3>3       <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg"  width="150" height="150"/>4   </div>5   <div class="new33">6       <h3>对原图旋转45度</h3>7       <img src="http://image.mamicode.com/info/201608/20180110205540853012.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 }
<style></style>

原图

技术分享

对原图旋转45度

技术分享
<style></style>

 

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

       实例：

       HTML：

 1 <div class="transform-origin"> 2     <h3>默认使用中心点位置对元素进行旋转效果</h3> 3     <div class="old"> 4         <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" /> 5         <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" /> 6         <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" /> 7         <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" /> 8         <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" /> 9     </div>10 11     <h3>使用transform-origin来改变元素的中心点-使元素bottom成为元素的起点位置对元素进行旋转</h3>12     <div class="new">13         <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" />14         <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" />15         <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" />16         <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" />17         <img src="http://image.mamicode.com/info/201608/20180110205540853012.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     }
<style></style>
默认使用中心点位置对元素进行旋转效果
技术分享 技术分享 技术分享 技术分享 技术分享
使用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://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" /> 5             <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" /> 6             <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" /> 7             <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" /> 8             <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" /> 9         </div>10 11         <h3>使用transform-origin来改变元素的中心点-使元素bottom成为元素的起点位置对元素进行倾斜</h3>12         <div class="new">13             <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" />14             <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" />15             <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" />16             <img src="http://image.mamicode.com/info/201608/20180110205540853012.jpg" alt="" width="142" height="200" />17             <img src="http://image.mamicode.com/info/201608/20180110205540853012.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:

<style></style>
默认使用中心点位置对元素进行倾斜效果
技术分享 技术分享 技术分享 技术分享 技术分享
使用transform-origin来改变元素的中心点-使元素bottom成为元素的起点位置对元素进行倾斜
技术分享 技术分享 技术分享 技术分享 技术分享

 

 

 

 

 （感谢-空智）

 

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


联系
我们