CSS缩放函数, 旋转函数与倾斜函数
Posted 学海泛舟拾贝
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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：
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成为元素的起点位置对元素进行倾斜
以上是关于CSS缩放函数, 旋转函数与倾斜函数的主要内容，如果未能解决你的问题，请参考以下文章