css3盒子变形(transform)

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

Transform 方法

语法： transform: none|transform-functions;

css3-2D变形

通过使用 CSS transform 属性，您可以利用以下 2D 转换方法

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

1.translate(X,Y) 方法

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）

实例

div{
    /*值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。*/
    transform: translate(50px,100px);
    -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari and Chrome */
    -o-transform: translate(50px,100px); /* Opera */
    -moz-transform: translate(50px,100px); /* Firefox */
}

2. rotate() 方法

rotate() 方法根据给定的角度顺时针或逆时针旋转元素

实例

div{
    /*值 rotate(30deg) 把元素顺时针旋转 30 度。*/
    transform: rotate(30deg);
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari and Chrome */
    -o-transform: rotate(30deg); /* Opera */
    -moz-transform: rotate(30deg); /* Firefox */
}

3.scale() 方法

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）

实例

div{
    /*值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。*/
    transform: scale(2,4);
    -ms-transform: scale(2,4); /* IE 9 */
    -webkit-transform: scale(2,4); /* Safari 和 Chrome */
    -o-transform: scale(2,4); /* Opera */
    -moz-transform: scale(2,4); /* Firefox */
}

4. scaleX() 方法

scaleX() 方法增加或减少元素的宽度

实例

div {
    transform: scaleX(2);
}

5. scaleY() 方法

scaleY() 方法增加或减少元素的高度

实例

div {
    transform: scaleX(2);
}

6. skewX() 方法

skewX() 方法使元素沿 X 轴倾斜给定角度

实例

div {
    /* 元素沿X轴倾斜 20 度 */
    transform: skewX(20deg);
}

7. skewY() 方法

skewY() 方法使元素沿 Y 轴倾斜给定角度

实例

div {
    /* 元素沿X轴倾斜 20 度 */
    transform: skewX(20deg);
}

8. skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度

实例

div{
/*值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。*/
    transform: skew(30deg,20deg);
    -ms-transform: skew(30deg,20deg); /* IE 9 */
    -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
    -o-transform: skew(30deg,20deg); /* Opera */
    -moz-transform: skew(30deg,20deg); /* Firefox */
}

matrix() 方法

matrix() 方法把所有 2D 变换方法组合为一个

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素

参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

/*使用 matrix 方法将 div 元素旋转 30 度：*/
div{
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
    -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
    -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
    -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}

transform-origin 属性

允许你改变被转换元素的位置

语法： transform-origin: x-axis y-axis z-axis;

属性值

• x-axis ：定义视图被置于 X 轴的何处。可能的值：left，center，right，length，%
• y-axis ：定义视图被置于 Y 轴的何处。可能的值：top，center，bottom，length，%
• z-axis ：定义视图被置于 Z 轴的何处。可能的值：length

/*设置旋转元素的基点位置*/
div{
    transform: rotate(45deg);
    transform-origin:20% 40%;
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin:20% 40%; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
    -webkit-transform-origin:20% 40%; /* Safari 和 Chrome */
    -moz-transform: rotate(45deg); /* Firefox */
    -moz-transform-origin:20% 40%; /* Firefox */
    -o-transform: rotate(45deg); /* Opera */
    -o-transform-origin:20% 40%; /* Opera */
}

CSS 3D 转换方法

通过 CSS transform 属性，您可以使用以下 3D 转换方法

• rotateX()
• rotateY()
• rotateZ()

1. rotateX() 方法

rotateX() 方法使元素绕其 X 轴旋转给定角度

实例

div{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
    -moz-transform: rotateX(120deg); /* Firefox */
}

2.rotateY() 方法

rotateY() 方法使元素绕其 Y 轴旋转给定角度

实例

div{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
    -moz-transform: rotateY(130deg); /* Firefox */
}

rotateZ() 方法

rotateZ() 方法使元素绕其 Z 轴旋转给定角度

实例

div{
    transform:rotateZ(130deg);
    -webkit-transform:rotateZ(130deg); /* Safari and Chrome */
    -moz-transform:rotateZ(130deg); /* Firefox */
}

perspective属性

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身

注释：perspective 属性只影响 3D 转换元素

语法： perspective: number|none;

属性值

• number ：元素距离视图的距离，以像素计
• none ：默认值。与 0 相同。不设置透视。

实例

div{
    perspective: 500;
    -webkit-perspective: 500; /* Safari 和 Chrome */
}

trasform-style属性

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素

注释：该属性必须与 transform 属性一同使用

语法： transform-style: flat|preserve-3d;

属性值

• flat ：子元素将不保留其 3D 位置。
• preserve-3d ：子元素将保留其 3D 位置

实例

div{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari 和 Chrome */
-webkit-transform-style: preserve-3d; /* Safari 和 Chrome */
}