转换通过元素的形状, 大小和位置对其进行修改。它沿X轴和Y轴变换元素。
下面列出了六种主要的转换类型：
- translate()
- rotation()
- scale()
- skewX()
- skewY()
- matrix()
translate()方法：
translate()方法用于将元素从其实际位置移动到沿X轴和Y轴的位置。
例子：
<!DOCTYPE html>
< html >
< head >
< title >2D Transform</ title >
< style >
.geeks {
font-size:25px;
margin:20px 0;
margin-left:100px;
}
img {
border:1px solid black;
transition-duration:2s;
-webkit-transition-duration:2s;
}
img:hover{
transform:translate(100px, 100px);
/* prefix for IE 9 */
-ms-transform:translate(100px, 100px);
/* prefix for Safari and Chrome */
-webkit-transform:translate(100px, 100px);
}
</ style >
</ head >
< body >
< div class = "geeks" >Translate() Method</ div >
< img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-9.png"
alt = "" />
</ body >
</ html >输出如下：
rotation()方法：
rotation()方法根据给定的角度顺时针或逆时针旋转元素。程度在括号中给出。
例子：
<!DOCTYPE html>
< html >
< head >
< title >2D Transform</ title >
< style >
img {
border:1px solid black;
}
img:hover {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg); /* Standard syntax */
}
.geeks {
font-size:25px;
text-align:center;
margin-top:100px;
}
</ style >
</ head >
< body >
< div class = "geeks" >Rotation() Method</ div >
< img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-9.png"
alt = "" />
</ body >
</ html >输出如下：
逆时针旋转：
使用负值可逆时针旋转元素。
例子：
<!DOCTYPE html>
< html >
< head >
< title >2D Transform</ title >
< style >
img {
border:1px solid black;
}
img:hover {
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg); /* Standard syntax */
}
.geeks {
font-size:25px;
text-align:center;
margin-top:100px;
}
</ style >
</ head >
< body >
< div class = "geeks" >Counter-clock Rotate() Method</ div >
< img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-9.png"
alt = "" />
</ body >
</ html >输出如下：
scale()方法：
根据给定的宽度和高度参数, 用于增加或减小元素的大小。
例子：
<!DOCTYPE html>
< html >
< head >
< title >2D Transform</ title >
< style >
img {
border:1px solid black;
}
img:hover {
-ms-transform: scale(1, 2); /* IE 9 */
-webkit-transform: scale(1, 1); /* Safari */
transform: scale(1, 2); /* Standard syntax */
}
.geeks {
font-size:25px;
text-align:center;
margin-top:100px;
}
</ style >
</ head >
< body >
< div class = "geeks" >Scale() Method</ div >
< img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-9.png"
alt = "" />
</ body >
</ html >输出如下：
注意：元素的大小可以使用其宽度和高度的一半来减小。
skewX()方法：
此方法用于沿X轴以给定角度倾斜元素。
例子：
<!DOCTYPE html>
< html >
< head >
< title >2D Transform</ title >
< style >
img {
border:1px solid black;
}
img:hover {
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg); /* Standard syntax */
}
.geeks {
font-size:25px;
text-align:center;
margin-top:100px;
}
</ style >
</ head >
< body >
< div class = "geeks" >skewX() Method</ div >
< img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-9.png"
alt = "" />
</ body >
</ html >输出如下：
skewY()方法：此方法用于沿Y轴以给定角度倾斜元素。
<!DOCTYPE html>
< html >
< head >
< title >2D Transform</ title >
< style >
img {
border:1px solid black;
}
img:hover {
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg); /* Standard syntax */
}
.geeks {
font-size:25px;
text-align:center;
margin-top:100px;
}
</ style >
</ head >
< body >
< div class = "geeks" >skewY() Method</ div >
< img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-9.png"
alt = "" />
</ body >
</ html >输出如下：
skew()方法：
此方法使元素沿X轴和Y轴倾斜给定角度。以下示例使元素沿X轴倾斜20度, 并沿Y轴倾斜10度：
例子：
<!DOCTYPE html>
< html >
< head >
< title >2D Transform</ title >
< style >
img {
border:1px solid black;
}
img:hover {
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg); /* Standard syntax */
}
.geeks {
font-size:25px;
text-align:center;
margin-top:100px;
}
</ style >
</ head >
< body >
< div class = "geeks" >skew() Method</ div >
< img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-9.png"
alt = "" />
</ body >
</ html >输出如下：
matrix()方法：
此方法将所有2D变换属性组合为一个属性。矩阵变换属性接受以下六个参数：
矩阵(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
例子：
<!DOCTYPE html>
< html >
< head >
< title >2D Transform</ title >
< style >
img {
border:1px solid black;
}
img:hover {
-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 */
}
.geeks {
font-size:25px;
text-align:center;
margin-top:100px;
}
</ style >
</ head >
< body >
< div class = "geeks" >matrix() Method</ div >
< img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-9.png"
alt = "" />
</ body >
</ html >输出如下：
