CSS布局（如何实现2D转换（代码示例）） _CSS

转换通过元素的形状, 大小和位置对其进行修改。它沿X轴和Y轴变换元素。
【CSS布局（如何实现2D转换（代码示例））】下面列出了六种主要的转换类型：

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 >

输出如下：