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>