zoukankan html css js c++ java

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

（感谢-空智）

查看全文

相关阅读:
UVA 11488 Hyper Prefix Sets （字典树）
UVALive 3295 Counting Triangles
POJ 2752 Seek the Name, Seek the Fame （KMP）
UVA 11584 Partitioning by Palindromes （字符串区间dp）
UVA 11100 The Trip, 2007 （贪心）
JXNU暑期选拔赛
 计蒜客---N的-2进制表示
 计蒜客---线段的总长
 计蒜客---最大质因数
 JustOj 2009: P1016 （dp）

原文地址：https://www.cnblogs.com/qbzmy/p/5823237.html