CSS变换改变元素的位置和形状。
CSS变换可以将仿射线性变换应用于HTML元素。
这些变换包括在平面和3D空间中的旋转，倾斜，缩放和平移。
我们可以使用以下两个属性来定义CSS变换。
我们可以使用translate()方法从当前位置移动元素。
在下面的代码中 translate(50px，100px)移动元素从左边50像素，从顶部100像素。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
div#div2 {
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
transform: translate(50px,100px);
}
</style>
</head>
<body>
<div>Hello.</div>
<div id="div2">Hello. </div>
</body>
</html>
上面的代码呈现如下：
我们可以使用rotate()方法以给定的度数顺时针旋转元素。
我们也可以使用负值逆时针旋转元素。
在下面的代码中 rotate(30deg)将元素顺时针旋转30度。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: black;
border: 1px solid red;
}
div#div2 {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
</style>
</head>
<body>
<div>Hello.</div>
<div id="div2">Hello. </div>
</body>
</html>
上面的代码呈现如下：
我们可以使用scale()方法来增加或减少元素大小。
我们可以改变宽度(X轴)和高度(Y轴)。
在下面的代码中 scale(2,4)将宽度转换为原始大小的两倍，高度为其原始尺寸的4倍。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: blue;
border: 1px solid black;
}
div#div2 {
margin: 100px;
-ms-transform: scale(2,4);
-webkit-transform: scale(2,4);
transform: scale(2,4);
}
</style>
</head>
<body>
<div>Hello.</div>
<div id="div2">Hello.</div>
</body>
</html>
上面的代码呈现如下：
我们可以使用skew()方法在给定的角度转动元素。
我们可以沿水平(X轴)和垂直(Y轴)线旋转元素。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
div#div2 {
-ms-transform: skew(30deg,20deg);
-webkit-transform: skew(30deg,20deg);
transform: skew(30deg,20deg);
}
</style>
</head>
<body>
<div>Hello.</div>
<div id="div2">Hello.</div>
</body>
</html>
上面的代码呈现如下：
matrix()方法将所有的2D变换方法组合成一个。
矩阵方法采用六个参数，包含数学函数，它允许您：旋转，缩放，移动（平移）和偏斜元素。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: blue;
border: 1px solid black;
}
div#div2 {
-ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
-webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
transform: matrix(0.866,0.5,-0.5,0.866,0,0);
}
</style>
</head>
<body>
<div>Hello. </div>
<div id="div2">Hello. </div>
</body>
</html>
上面的代码呈现如下：
我们可以使用 rotateX()方法以给定的度数围绕其X轴旋转元素。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
div#div2 {
-webkit-transform: rotateX(130deg);
transform: rotateX(130deg);
}
</style>
</head>
<body>
<div>Hello. </div>
<div id="div2">Hello. </div>
</body>
</html>
上面的代码呈现如下：
我们可以使用 rotateY()方法以给定的度数围绕其Y轴旋转元素。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
div#div2 {
-webkit-transform: rotateY(130deg);
transform: rotateY(130deg);
}
</style>
</head>
<body>
<div>Hello. </div>
<div id="div2">Hello. </div>
</body>
</html>
上面的代码呈现如下：
| 属性 | 描述 | CSS |
|---|---|---|
| transform-origin | 设置转换元素的位置 | 3 |
| transform-style | 设置转换的样式 | 3 |
| transform | 转换的简写属性 | 3 |
HTML meta 标签meta 标签中的 charset 属性用来规定HTML文档应该使用哪种字符编码，详细的使用方法如下所示：实例规定 HTML 文档...
HTML menu 标签type 属性用于定义 menu 的类型，请参考下述例子，在此例中定义了一个“toolbar”类型的菜单：实例带有两个菜单按...
实例HTML5 output标签用来定义不同类型的输出。请参考下述示例：将计算结果显示在 output 元素中：form oninput="x.value=parseI...
SQL FIELD()函数 SQL FIELD()函数实例代码教程 FIELD()函数返回的索引（从1开始的位置）的str在str1，str2，str3，...列表中。...
SQL UCASE() 函数 UCASE() 函数把字段的值转换为大写。SQL UCASE() 语法SELECT UCASE(column_name) FROM table_name;用于 S...