zoukankan      html  css  js  c++  java
  • CSS3转换

     一、2D转换

    1、css3 rotate()旋转

      通过指定的角度参数对原元素指定一个2D rotation(2D 旋转)

      语法:

        transform:rotate(<angle>);

      举个栗子:

        transform:rotate(10deg);  //deg:角度

        transform:rotate(-10deg);

      参数说明:

        angle指旋转角度,正数表示顺时针旋转,负数表示逆时针旋转。

    2、css3 translate() 平移

        translate()方法,根据左(x轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动

        translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)。

      语法:

       1、 translatX(<translation-value>)

          通过给定一个X方向上的数目指定一个translation。

          transform:translateX(<translation-value>);

        举个栗子:

          transform:translateX(200px);

          transform:translateX(50%);

       2、 translatY(<translation-value>)

          通过给定一个Y方向上的数目指定一个translation。

          transform:translateY(<translation-value>);

        举个栗子:

          transform:translateY(200px);

          transform:translateY(50%);

      3、translate(<translation-value>[,<translation-value>])

        通过矢量[tx,ty]指定一个2D translation,tx是第一个过渡值参数,ty是第二个过度值参数选项。

          transform:translate(<translation-value>[,<translation-value>]);

        举个栗子:

         transform:translate(200px,100px);

    3、css3 scale() 缩放

        scale()方法,指定对象的2D scale(2D缩放)。

        三种情况:

        1、scaleX(x)元素仅水平方向缩放(x轴缩放);

          scaleX(<number>)

          使用[sx,1]缩放矢量执行缩放操作,sx为所需参数。

         语法:

          transform:scaleX(<number>);

         举个栗子:

            transform:scaleX(0.5);

           transform:scaleX(50%);

        2、scaleY(y)元素仅水平方向缩放(y轴缩放);

          scaleY(<number>)

          使用[sy,1]缩放矢量执行缩放操作,sy为所需参数。

         语法:

          transform:scaleY(<number>);

         举个栗子:

            transform:scaleY(0.5);

           transform:scaleY(50%);

        3、scale(x,y)使元素水平方向和垂直方向同时缩放(x轴和y轴同时缩放);

           transform:scale(0.5,0.5);

           transform:scale(50%,50%);

    4、css3 skew() 扭曲或斜切

        skew方法,指定对象skew transformation(斜切扭曲)。

      三种情况:

        skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);

           transform:skewX(10deg);

           transform:skewX(-10deg);

        skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形);

           transform:skewY(10deg);

           transform:skewY(-10deg);

        skew(x,y)使元素在水平和垂直方向同时扭曲变形(X轴和Y轴扭曲变形);

    5、css3 matrix() 矩阵或混合

        以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换。

        相当于直接应用一个[a,b,c,d,e,f]变换矩阵。

      语法:

        transform:matrix(a,c,b,d,tx,ty);

       参数说明:

        tx,ty就是基于x和y坐标重新定位元素。

    二、3D转换

    1、css3 rotate3D()旋转

      旋转rotateX

        rottateX方法指定对象在X轴上的旋转角度

      语法:

        transform:rotateX(angle);

      参数说明

        angle表示旋转的角度。

      举个栗子:

        transform:rotateX(50deg);

      旋转rotate

       transform:rotate3d(x,y,z,angle);

      

    2、css3 translate3D() 平移

      移动translateZ

        translateZ方法指定对象Z轴平移。

      语法:

        transform:translateZ(z);

       移动translate3D

        translate方法指定对象3D位移

      语法:

        transform:translate3d(x,y,z);

    3、css3 scale3D() 缩放

      缩放scaleZ

        scaleZ方法指定对象的z轴缩放。

      语法:

        transform:scaleZ(z);

      缩放scale3d

       scale3d方法指定对象3D位移

      语法:

        transform:scale3d(x,y,z);

    4、css3 matrix3D() 矩阵或混合

      matrix3D方法以一个4*4矩阵的形式指定一个3D变换。

      语法:

        transform:matrix3d(sx,n,n,n,n,sz,n,n,n,n,sz,n,n,n,n,1);

      参数说明:

        使用16个值的4*4矩阵。

      

    5、CSS3 perspective()

  • 相关阅读:
    初学Java——数组
    Ubuntu下将软件添加到快捷启动栏的问题
    初学Java——方法
    初学Java——选择
    初学Java——常用类之Math笔记
    初学Java——基本程序设计笔记(2)
    初学Java——基本程序设计笔记(1)
    关于IE浏览器里修改元素style属性的问题
    2.22,2.24工作进度
    2.21工作进度
  • 原文地址:https://www.cnblogs.com/xianyujn/p/6169478.html
Copyright © 2011-2022 走看看