CSS transform 属性值说明
| 值 | 描述 |
|---|---|
| none | 没有应用变换。 |
| translate() | 通过向量[Tx，TY]通过矢量转换元素。 Tx是沿x轴的平移。 ty是y轴的平移。 |
| translateX() | 沿x轴划分元素。 |
| translateY() | 沿Y轴转换元素。 |
| scale(x,y) | 向上或者向下缩放元素。 |
| scaleX() | 向上或者向下缩放x轴方向的元素。 |
| scaleY() | 向上或者向下缩放y轴方向的元素。 |
| rotate(number) | 旋转二维空间中的元素。角度在参数中指定。 |
| skew() | 沿X轴和Y轴定义2D偏斜变换。 |
| skewX() | 沿X轴定义2D歪斜变换。 |
| skewY() | 沿Y轴定义2D歪斜变换。 |
| matrix() | 使用六个值的矩阵定义2D变换。 |
| translateZ | 通过沿z轴通过给定的量转换元素。 |
| translate3d() | 定义三维转换。 |
| scaleZ() | 沿着z轴缩放第三尺寸中的元素。 |
| scale3d() | 定义三维比例转换。 |
| rotateX() | 在三维空间中围绕X轴旋转一个元件。 |
| rotateY() | 在三维空间中旋转围绕Y轴的元件。 |
| rotateZ() | 在三维空间中围绕Z轴旋转一个元件。 |
| rotate3d() | 定义三维旋转变换。 |
| matrix3d() | 使用16个值的4x4矩阵定义3D变换。 |
| perspective() | 定义三维元素的透视图。 |
| initial | 使属性使用其默认值。 |
| inherit | 从其父元素继承属性。 |
借助 CSS 变换属性，可将 2D 或者 3D 变换应用于元素。
它是 CSS3 属性之一。
此属性允许旋转、倾斜、缩放或者平移元素。
它不接受任何值或者来自变换函数列表。
只有盒子模型定位的元素可以被转换。
| 初始值 | none |
|---|---|
| 应用于 | 可变形元素。 |
| 继承 | 无效 |
| 可动画的 | 是的。角度是可以动画的。 |
| 版本 | CSS3. |
| DOM 语法 | Object.Style.Transform ="rotate(10deg)"; |
语法
transform: none | transform-functions | initial | inherit;
变换属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
border: 2px dashed #666;
background-color: #8ebf42;
transform: translate(10px, 40px) rotate(50deg);
width: 130px;
height: 80px;
}
</style>
</head>
<body>
<h2>Transform 属性示例</h2>
<div>An element</div>
</body>
</html>
具有“rotate”、“skewY”、“scaleY”、“translateX”、“skew”值的变换属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
margin: 35px 20px;
}
div.box1 {
width: 130px;
height: 80px;
border: 1px solid #000;
background-color: #1c87c9;
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
div.box2 {
width: 120px;
height: 80px;
border: 1px solid #000;
background-color: #8ebf42;
-ms-transform: skewY(30deg);
-webkit-transform: skewY(30deg);
transform: skewY(30deg);
}
div.box3 {
width: 160px;
height: 80px;
border: 1px solid #000;
background-color: #FFFF00;
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
div.box4 {
width: 160px;
height: 80px;
border: 1px solid #000;
background-color: #ccc;
-ms-transform: rotate(160deg);
-webkit-transform: rotate(160deg);
transform: rotate(160deg);
}
div.box5 {
width: 160px;
height: 80px;
border: 1px solid #000;
background-color: #990099;
-ms-transform: translateX(50px);
-webkit-transform: translate(50px);
transform: translateX(50px);
}
div.box6 {
width: 160px;
height: 80px;
border: 1px solid #000;
background-color: #FF0000;
-ms-transform: skew(170deg, 170deg);
-webkit-transform: skew(170deg, 170deg);
transform: skew(170deg, 170deg);
}
</style>
</head>
<body>
<h2>Transform 属性示例</h2>
<h3>transform: rotate(30deg):</h3>
<div class="box1"></div>
<h3>transform: skewY(30deg):</h3>
<div class="box2"></div>
<h3>transform: scaleY(1):</h3>
<div class="box3"></div>
<h3>transform: transform:rotate(160deg):</h3>
<div class="box4"></div>
<h3>transform: translateX(50px):</h3>
<div class="box5"></div>
<h3>transform: skew(170deg,170deg):</h3>
<div class="box6"></div>
</body>
</html>
在给定的示例中，为了获得最大的浏览器兼容性，使用了 -webkit- for Safari、Google Chrome 和 Opera 扩展。
“translate”平移值
“translate”值用于向上或者向下移动元素，以及横向移动。
更多值如下所示。
“rotate”旋转值
在“旋转”值的帮助下，元素从原始位置顺时针旋转。
在使用负值的情况下，它将以相反的方向旋转。
“skew”偏斜值
“skewX”和“skewY”变换值用于以某种方式倾斜元素。
不存在用于倾斜元素的任何速记属性，这就是使用这两个值的原因。
日期：2020-06-02 22:14:50 来源：oir作者：oir