CSS3动画使用-transform: rotate(旋转) | scale(缩放) | translate(移动) | skew(倾斜)

1、CSS3 transform属性

应用于2D或3D转换,允许对元素进行倾斜、移动、缩放或旋转。

 

2D转换元素能够改变元素 x 和 y 轴,3D转换元素还能改变其 Z 轴。

 

属性:

none 定义不进行转换。  
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。  
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。  
translate(x,y) 定义 2D 转换。  
translate3d(x,y,z) 定义 3D 转换。  
translateX(x) 定义转换,只是用 X 轴的值。  
translateY(y) 定义转换,只是用 Y 轴的值。  
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。  
scale(x,y) 定义 2D 缩放转换。  
scale3d(x,y,z) 定义 3D 缩放转换。  
scaleX(x) 通过设置 X 轴的值来定义缩放转换。  
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。  
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。  
rotate(angle) 定义 2D 旋转,在参数中规定角度。  
rotate3d(x,y,z,angle) 定义 3D 旋转。  
rotateX(angle) 定义沿着 X 轴的 3D 旋转。  
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。  
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。  
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。  
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。  
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。  
perspective(n) 为 3D 转换元素定义透视视图。

 

2、CSS3 transform-origin属性

 

元素转换的中心点默认为元素中心点的位置,使用transform-origin属性可以改变转换中心点的位置。

 

2D转换元素能够改变转换中心点的 x 和 y 轴位置,3D转换元素还能改变转换中心点的Z 轴位置。

 

必须与transform属性一同使用。

 

语法:transform-origin : x-axis y-axis z-axis

 

默认:transform-origin : 50% 50% 0

 

x-axis和y-axis可能的值:left | center | right | 数值(px) | 百分比(%)

 

z-axis可能的值:数值(px) 

 

 

 

eg:倾斜
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#square{
background:blue;
width:200px;
height:200px;
position:absolute;
left:100px;
top:100px;
transform:skew(5deg, 5deg);
}
</style>
</head>
<body>
<div id="square"></div>
</body>
</html>

 

eg:移动
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#square{
background:blue;
width:200px;
height:200px;
position:absolute;
left:0;
top:0;
transform:translate(50px, 50px);
}
</style>
</head>
<body>
<div id="square"></div>
</body>
</html>

 

eg:缩放
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#circle{
background:blue;
width:200px;
height:200px;
border-radius:50%;
position:absolute;
left:100px;
top:100px;
transform:scale(0.5, 2);
}
</style>
</head>
<body>
<div id="circle"></div>
</body>
</html>

 

eg:旋转
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#circle{
background:blue;
width:200px;
height:200px;
border-radius:50%;
position:absolute;
left:100px;
top:100px;
}
#track{
width:300px;
height:300px;
border:1px solid grey;
border-radius:50%;
position:absolute;
left:50px;
top:50px;
}
#plane{
width:60px;
height:30px;
background:grey;
border-radius:10px;
position:absolute;
left:170px;
top:35px;
transform-origin:center 165px;
transform:rotate(45deg);
}
</style>
</head>
<body>
<div id="circle"></div>
<div id="track"></div>
<div id="plane"></div>
</body>
</html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/463.html