CSS3 Transformation
Through CSS3 transformation, we can move, scale, rotate, lengthen or stretch elements.
Browser support
IE10, FireFox and Opera support the transform attribute. Chrome and Safari require the prefix -webkit-.
Note: IE9 requires the prefix -ms-.
2D Transformation
In this chapter you will learn about the 2D transformation method:
translate()
rotate()
scale()
skew()
matrix()
translate() method
The element moves from the current position, according to the given left (x coordinate) and top (y coordinate) displacement parameters:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
/*translate方法位移*/
div {
width:100px;
height:80px;
background-color:orange;
position:absolute;
left:100px;
top:100px;
}
div.one {
transform:translate(30px,30px);
z-index:1;
}
div.two {
background-color:blue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>rotate() method
If the element is given a clockwise angle and negative values are allowed, the element will be rotated counterclockwise.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div {
width: 150px;
height: 50px;
background-color: orange;
text-align: center;
position: absolute;
left: 100px;
top: 100px;
}
div.one {
transform: rotate(30deg);
-webkit-transform:rotate(30deg);
}
div.two {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>scale() method
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 100px;
height: 100px;
}
div.one {
background-color: red;
transform: scale(0.5,0.5);
}
</style>
</head>
<body>
<div>
<div class="one"></div>
</div>
</body>
</html>skew() method
Through the skew() method, the element is tilted at a given angle, according to the given horizontal line (X axis) and vertical line (Y axis) parameters:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:orange;
position:absolute;
left:100px;
top:100px;
}
div.one {
background-color:red;
transform:skew(30deg,10deg);
}
</style>
</head>
<body>
<div></div>
<div class="one"></div>
</body>
</html>matrix() method
The matrix() method combines all 2D transformation methods.
The matrix() method takes six parameters and contains mathematical functions that allow you to: rotate, scale, move and tilt elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:orange;
position:absolute;
left:100px;
top:100px;
}
div.one {
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
background-color:red;
}
</style>
</head>
<body>
<div></div>
<div class="one"></div>
</body>
</html>New conversion properties
All conversion properties are listed below:
Description
transform Suitable for 2D or 3D transformed elements 3
FunctionDescription
##matrix(n,n,n,n,n,n) Definition of 2D transformation, Use a matrix of six values.
translate(x,y) Defines a 2D transformation that moves elements along the X and Y axes. translateX(n) Defines a 2D transformation that moves elements along the X-axis.
translateY(n) Defines a 2D transformation that moves elements along the Y axis.
