• 微信号
目录

html笔记

您当前的位置:首页 > 我的笔记 > html笔记>css3盒子变形(transform)

上一篇: css3盒子模型

下一篇: CSS3过渡

css3盒子变形(transform)

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

Transform 方法

语法: transform: none|transform-functions;

描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

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 */
}

上一篇: css3盒子模型

下一篇: CSS3过渡