30.CSS3变形效果【上】

                                                           第二十四章   CSS3变形效果【上】

一、transform

       CSS3提供元素变形效果，也叫作变换。他可以使元素实现旋转，缩放和平移功能。属性有

         （1）transform   ：指定应用的变换功能

         （2）transform   ：指定变换的起点

 

       对于transform的属性值，具体如下表：

           属性值                        说明

        none                            无变换

 

        translate (长度值或百分数值)    

        translateX(长度值或百分数值)    在水平方向、垂直方向或两个方向上平等元素

        translatY (长度值或百分数值)

 

        scale （数值）

        scaleX（数值）                  在水平方向，垂直方向或两个方向上缩放元素

        scaleY（数值）

 

        rotate(角度)                    旋转元素

 

        skew (角度)

        skewX(角度)                     在水平方向，垂直方向或两个方向上使元素倾斜一定角度

        skewY(角度)

 

        matrix(4～6数值，逗号隔开)      指定自定义变装

 

      //向水平和垂直各位移200px，也可以使用百分比

               transform：translate（200px,200px）;

 

      //箱水平平移200像素，不加后面的0也可以

               transform：translate（200px，0）;

               transform：translateX（200px）;

 

      //向垂直平移200像素

               transform：translate（0,200px）;

               transform：translateY（200px）;

 

      //水平、垂直方向放大1.5倍

               transform：scale(1.5);

               transform：scale(1.5,1.5)；

 

      //水平、垂直方向缩小0.8倍

               transform：scale(1.5,1.5);

 

     //水平方向放大1.5倍

               transform：scaleX(1.5);

     //垂直方向放大1.5倍

               transform：scaleY(1.5);

 

     //旋转元素,0～360度之间，负值均可。

               transform：rotate（-45deg）;

 

     //倾斜元素，0～360度之间，负值均可。

               transform：skewX（45deg，20deg）;

 

 

     //水平倾斜元素,0～360度之间，负值均可。

               transform：skewX（45deg）;

     //垂直倾斜元素,0～360度之间，负值均可。

               transform：skewY（45deg）;

 

     //用过六个数值指定矩形，期内部计算公式复杂，百度一下。

               transform:matrix(1,0,0,1,30,30);

 

     //不同的值可以累积，用空格分割

               transform：rotate（-45deg） scale（1.5）;

 

二、transform-origin ；他的属性可以设置变换的起点，默认情况下，使用元素的中心设为起点。

          属性值                     说明

         百分数值           指定元素x轴成y轴的起点      

         长度值             指定距离

 

         left

         center             指定x轴的位置

         right

 

         top

         center             指定y轴的位置

         bottom

      属性是用来改变变形的基准点，默认是中心位置，如果改变基准点，就会按照这个基准点变形。

 

      //默认值，一中心点变形

              transform-origin：center center；

              transform-origin：50%，50&；

 

      //以左上角为尾基准点变形

              transform-origin：left top；

              transform-origin：0px 0px;

 

三、浏览器版本

                          Opera     Firefox     Chrome    IE       Safari

        支持需带前缀    11.5～22    3.5～15     4～35   3.1～8     9.0+

        支持不带前缀       23+        16+        26+      无       10.0+

 

      //兼容完整版

               -webkit-transform：rotate（45deg）;

               -moz-transform：rotate（45deg）;

               -o-transform：rotate（45deg）;

               -ms-transform：rotate（45deg）;

               transform：rotate（45deg）;

 

               -webkit-transform-origin：left top;

               -moz-transform-origin：left top;

               -o-transform-origin：left top;

               -ms-transform-origin：left top;

               transform-origin：left top;

转载于:https://www.cnblogs.com/keshuai752100461/p/8485219.html