CSS 2D 变换
CSS 中的 变换 用于通过元素的形状、大小和位置来修改元素。它沿着 X 轴和 Y 轴变换元素。下面列出了 6 种主要的转换类型:
- 翻译()
- 旋转()
- 比例()
- skewX()
- skewY()
- 矩阵()
我们将实现所有这些功能&将通过示例理解它们的概念。
translate()方法:translate()方法用于将元素从其实际位置沿 X 轴和 Y 轴移动。
示例:本示例描述了 CSS translate()方法，用于从元素的实际位置修改元素的位置。
超文本标记语言
<!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.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
alt="GFG" />
</body>
</html>
输出:
rotate()方法:rotate()方法根据给定的度数顺时针或逆时针旋转元素。括号中给出了度数。
示例:本示例描述了顺时针或逆时针旋转元素的 CSS rotate()方法。
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="geeks">Rotation() Method</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
alt="GFG" />
</body>
</html>
输出:
逆时针旋转:使用负值逆时针旋转元素。
示例:本示例描述了 CSS 反时钟旋转()方法，使用负值顺时针旋转元素。
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
.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.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
alt="GFG" />
</body>
</html>
输出:
scale()方法 : 用于根据给定的宽度和高度参数增加或减少元素的大小。
示例:本示例描述了 CSS scale()方法，根据元素的宽度&高度来调整元素的大小。
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: scale(1, 2);
/* Safari */
-webkit-transform: scale(1, 1);
/* Standard syntax */
transform: scale(1, 2);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="geeks">Scale() Method</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
alt="GFG" />
</body>
</html>
输出:
注意:元素的大小可以使用其宽度和高度的一半来减小。
【偏斜】()方法 : 该方法用于沿 X 轴以给定角度偏斜元素。
示例:本示例描述了在 X 轴上倾斜元素的 CSS skewX()方法。
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="geeks">skewX() Method</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
alt="GFG" />
</body>
</html>
输出:
【偏斜】()法 : 此法用于沿 Y 轴以给定角度偏斜元素。
示例:本示例描述了 CSS skewY()方法在 Y 轴上倾斜元素。
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="geeks">skewY() Method</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
alt="GFG" />
</body>
</html>
输出:
【偏斜】()方法 : 此方法沿 X 轴和 Y 轴以给定角度偏斜元素。以下示例将元素沿 X 轴倾斜 20 度，沿 Y 轴倾斜 10 度。
示例:此示例描述了 CSS skew()方法，用于沿 X 轴和 Y 轴以给定角度倾斜元素。
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: skew(20deg, 10deg);
/* Safari */
-webkit-transform: skew(20deg, 10deg);
/* Standard syntax */
transform: skew(20deg, 10deg);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="geeks">skew() Method</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
alt="GFG" />
</body>
</html>
输出:
矩阵()方法【T4:此方法将所有 2D 变换属性合并为一个属性。矩阵变换属性接受六个参数作为矩阵(scaleX()、skewY()、skyx()、scaleY()、translateX()、translateY())。
示例:本示例描述了将所有 2D 变换属性组合成单个属性的 CSS matrix()方法。
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<title>2D Transform</title>
<style>
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="geeks">matrix() Method</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
alt="GFG" />
</body>
</html>
输出:
支持的浏览器:
- 谷歌 Chrome 36.0
- 微软边缘 12.0
- Internet Explorer 10.0
- Firefox 16.0
- Opera 23.0
- Safari 9.0
注意: Internet Explorer 不支持全局值 initial 和 unset。
版权属于：月萌API www.moonapi.com，转载请注明出处
