CSS Transform变化和 transform-origin

来源：互联网发布：越川网络玄天变下载编辑：程序博客网时间：2024/05/16 13:47

CSS3 transform 属性

定义和用法

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

默认值：none继承性：no版本：CSS3JavaScript 语法：object.style.transform="rotate(7deg)"

语法

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 transform-origin 属性

定义和用法

transform-origin 属性允许您改变被转换元素的位置（即transform变化的源点，例如rotate()的话，transform-origin就是定义其旋转的中心）。

2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

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

默认值：50% 50% 0继承性：no版本：CSS3JavaScript 语法：object.style.transformOrigin="20% 40%"

语法

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

实例

设置旋转元素的基点位置：

#div2{padding:50px;position: absolute;border: 1px solid black;background-color: yellow;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 and Chrome */-webkit-transform-origin:20% 40%; /* Safari and Chrome */-moz-transform: rotate(45deg); /* Firefox */-moz-transform-origin:20% 40%; /* Firefox */-o-transform: rotate(45deg); /* Opera */-o-transform-origin:20% 40%; /* Opera */}</style></head><body><div id="div1">  <div id="div2">HELLO</div></div>

转自w3school

0 0

CSS Transform变化 和 transform-origin

CSS3 transform 属性

定义和用法

语法

CSS3 transform-origin 属性

定义和用法

语法

实例

CSS Transform变化和 transform-origin