CSS 2D转换
CSS 2D转换
CSS3支持变换属性。此transform属性使您可以平移，旋转，缩放和倾斜元素。
Transformation是一种用于更改形状，大小和位置的效果。
有两种类型的转换，即CSS3支持2D和3D转换。
CSS 2D变换
CSS 2D变换用于以平移，旋转，缩放和倾斜等方式重新更改元素的结构。
以下是2D变换方法的列表：
translate（x，y）：用于沿X轴和Y轴变换元素。
translateX（n）：用于沿X轴变换元素。
translateY（n）：用于沿Y轴变换元素。
rotate()：：用于根据角度旋转元素。
scale（x，y）：用于更改元素的宽度和高度。
scaleX（n）：用于更改元素的宽度。
scaleY（n）：用于更改元素的高度。
skewX()：：它指定倾斜变换以及X轴。
skewY()：：它指定倾斜变换以及Y轴。
matrix()：它指定矩阵变换。
translate()方法
CSS translate()方法用于根据给定的参数（即X轴和Y）将元素从其当前位置移动轴。
请参见以下示例：
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
div {
width: 300px;
height: 100px;
background-color: lightgreen;
border: 1px solid black;
-ms-transform: translate(100px,80px); /* IE 9 */
-webkit-transform: translate(100px,80px); /* Safari */
transform: translate(100px,80px); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This div element is translated 50 pixels right, and 100 pixels down from its current position by using translate () method.
</div>
</body>
</html>
rotate()方法
CSS rotation()方法用于根据给定的角度顺时针或逆时针旋转元素。
请参见以下示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: lightpink;
border: 1px solid black;
}
div#myDiv {
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari */
transform: rotate(30deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This is the 30 degree clockwise rotated div element by using rotate() method.
</div>
</body>
</html>
scale()方法
CSS scale()方法用于根据给定的宽度和高度来增大或减小元素的大小。
strong>请参见以下示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: lightpink;
border: 1px solid black;
border: 1px solid black;
-ms-transform: scale(2.5,2); /* IE 9 */
-webkit-transform: scale(2.5,2); /* Safari */
transform: scale(2.5,2); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This div element is scaled 2.5 times of its original width, and 2 times of its original height.
</div>
</body>
</html>
skewX()方法
CSS skewX()方法用于根据给定角度沿X轴倾斜元素。让我们以一个示例为准
请参见以下示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: lightpink;
border: 1px solid black;
}
div#myDiv {
-ms-transform: skewX(30deg); /* IE 9 */
-webkit-transform: skewX(30deg); /* Safari */
transform: skewX(30deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is skewed 30 degrees along the X-axis.
</div>
</body>
</html>
skewY()方法
CSS skewY()方法用于根据给定角度沿Y轴倾斜元素。让我们以一个示例为准
请参见以下示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: lightpink;
border: 1px solid black;
}
div#myDiv {
-ms-transform: skewY(30deg); /* IE 9 */
-webkit-transform: skewY(30deg); /* Safari */
transform: skewY(30deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is skewed 30 degrees along the Y-axis.
</div>
</body>
</html>
skew()方法
CSS skew()方法用于根据给定角度将元素与X轴和Y轴一起倾斜。
请参见以下示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: lightpink;
border: 1px solid black;
}
div#myDiv {
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari */
transform: skew(30deg,20deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is skewed 30 degrees along the X-axis, and 20 degrees along the Y-axis.
</div>
</body>
</html>
Matrix()方法
CSS matrix()方法将六种2D变换方法全部结合在一起。它允许您旋转，缩放，平移和倾斜元素。
语法：
矩阵方法的参数：matrix（scaleX()，skewY()，skewX()，scaleY()，translateX()，translateY()）
请参见以下示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: lightpink;
border: 1px solid black;
}
div#myDiv1 {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */
}
div#myDiv2 {
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */
transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */
}
</style>
</head>
<body>
<p>The matrix() method combines all the 2D transform methods into one.</p>
<div>
This is a normal div element.
</div>
<div id="myDiv1">
Using the matrix() method.
</div>
<div id="myDiv2">
Another use of the matrix() method.
</div>
</body>
</html>