CSS3 2D转换

CSS3 转换

通过CSS3转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

它如何工作?

转换是是元素改变形状、尺寸和位置的一种效果。

你可以使用2D或3D转换你的元素。

浏览器支持

属性 浏览器支持
transform          

 IE10、FireFox以及Opera支持transform属性。Chrome和Safari需要前缀-webkit-.

注释:IE9需要前缀-ms-.

2D转换方法:

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

1.translate()方法

元素从当前位置移动,根据给定的left(x坐标)和top(y坐标)位移参数:

  /*translate方法位移*/
        div {
            width:100px;
            height:80px;
            background-color:orange;
            position:absolute;
            left:100px;
            top:100px;
        }
            div.translateOne {
                transform:translate(30px,30px);
                z-index:1;
            }
            div.translateTwo {
                background-color:blue;
            }

 

2.rotate()方法

元素顺时针给定的角度、允许负值,元素将逆时针旋转。

        /*2D旋转*/
        div {
            width: 150px;
            height: 50px;
            background-color: orange;
            text-align: center;
            position: absolute;
            left: 100px;
            top: 100px;
        }

            div.rotateOne {
                transform: rotate(30deg);
                -webkit-transform:rotate(30deg);
            }

            div.rotateTwo {
                background-color: blue;
                color: white;
            }

3.scale()方法

        /*2D缩放*/
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            left: 100px;
            height: 100px;
        }

            div.scaleTwo {
                background-color: red;
                transform: scale(0.5,0.5);
            }

值scale(2,4)吧宽度转换为原始的2倍,把高度转换为原始的4倍。

4.skew()方法

通过skew()方法,元素倾斜给定的角度,根据给定的水平线(X轴)和垂直线(Y轴)参数:

        /*2D倾斜,面积不变*/
        div {
            width:100px;
            height:100px;
            background-color:orange;
            position:absolute;
            left:100px;
            top:100px;
        }
            div.skewTwo {
                background-color:red;
                transform:skew(30deg,0deg);
            }

值skew(30deg,20deg)围绕X轴把元素倾斜30度,围绕Y轴倾斜20度。

5.matrix()方法

matrix()方法把所有2D转换方法组合在一起。

matrix()方法需要六个参数,包含数学函数,允许你:旋转、缩放、移动以及倾斜元素。

如何使用matrix方法将div元素旋转30度:

        /*2d组合函数*/
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            left: 100px;
            top: 100px;
        }
            div.MatrixTwo {
                transform:matrix(0.866,0.5,-0.5,0.866,0,0);
                background-color:red;
            }

新的转换属性

下面的表格列出了所有的转换属性:

属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3

2D Transform 方法

函数 描述
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。

CSS3 2D转换,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。