CSS | 2D-преобразования
Преобразование изменяет элемент по его форме, размеру и положению. Он преобразует элементы по оси X и оси Y.
Ниже перечислены шесть основных типов трансформации:
- перевести()
- вращать ()
- шкала()
- skewX ()
- skewY ()
- матрица ()
The translate() Method: The translate() method is used to move the element from its actual position to along the X-axis and Y-axis.
Example:
<!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=alt=""/> </body></html> |
Выход:
The rotate() Method: The rotate() method rotates an element clockwise or counter-clockwise according to a given degree. The degree is given in the parenthesis.
Example:
<!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=alt=""/> </body></html> |
Выход:
Counter-clock wise rotation: Use negative values to rotate the element counter clockwise.
Example:
<!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=alt=""/> </body></html> |
Выход:
The scale() Method: It is used to increase or decrease the size of an element according to the parameter given for the width and height.
Example:
<!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=alt=""/> </body></html> |
Выход:
Примечание: размер элемента можно уменьшить, используя половину его ширины и высоты.
The skewX() Method: This method is used to skew an element in the given angle along the X-axis.
Example:
<!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=alt=""/> </body></html> |
Выход:
The skewY() Method: This method is used to skew an element in the given angle along the Y-axis.
<!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=alt=""/> </body></html> |
Выход:
The skew() Method: This method skews an element in the given angle along the X-axis and the Y-axis. The following example skews the element 20 degrees along the X-axis, and 10 degrees along the Y-axis:
Example:
<!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=alt=""/> </body></html> |
Выход:
The matrix() Method: This method combines all the 2D transform property into a single property. The matrix transform property accepts six parameters as given below:
matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )
Example:
<!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=alt=""/> </body></html> |
Выход: