css3动画-transform属性

时间:2021-02-25 10:18:41

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

transform属性---2D位置移动


1.translate(x,y) 定义             基于原来的位置,沿X轴平移,长度为x,沿Y轴平移,长度为y 语法

                   transform:translate(x,y);                                                                                                         

2.translateX(x) 定义             基于原来的位置,沿X轴平移,长度为x 语法

                   transform:translateX(x);                                                                                                         

3.translateY(y)定义            基于原来的位置,沿Y轴平移,长度为y语法

                   transform:translateY(y);                                                                                                         


transform属性---3D位置移动


1.translate3d(x,y,z)定义            基于原来的位置,沿X轴平移,长度为x,沿Y轴平移,长度为y,沿Z轴平移,长度为z语法

                   transform:translate3d(x,y,z);                                                                                                       

2.translateZ(z)定义            基于原来的位置,沿Z轴平移,长度为z语法

                   transform:translateZ(z);                                                                                                         



transform属性---2D缩放转换


1.scale(x,y)
定义:         基于原来的位置进行伸缩变换,其中x代表沿X轴的伸缩倍数,y代表沿Y轴的伸缩倍数

语法:

         transform:scale(x,y);                                                                                                             

2.scaleX(x)定义:         基于原来的位置进行伸缩变换,其中x代表沿X轴的伸缩倍数

语法:

         transform:scale(x);                                                                                                            

3.scaleY(y)定义:         基于原来的位置进行伸缩变换,其中y代表沿Y轴的伸缩倍数

语法:

         transform:scale(y);                                                                                                             


transform属性---3D缩放转换


1.scale3d(x,y,z)定义:         基于原来的位置进行伸缩变换,其中x代表沿X轴的伸缩倍数,y代表沿Y轴的伸缩倍数,z代表沿Z轴的伸缩倍数

语法:

         transform:scale3d(x,y,z);                                                                                                             

2.scaleZ(z)定义:         基于原来的位置进行伸缩变换,其中z代表沿Z轴的伸缩倍数

语法:

         transform:scaleZ(z);                                                                                                             

transform属性---2D旋转


1.rotate(angle)定义:         以图形的几何中心点为旋转中心,顺时针旋转角度为angle

语法:

         transform:rotate(angle);                                                                                                            

2.rotateX(x)

定义:         绕X轴方向旋转,顺时针旋转角度为angle

语法:

         transform:rotateX(x);                                                                                                            

3.rotateZ(z)定义:         绕Y轴方向旋转,顺时针旋转角度为angle

语法:

         transform:rotateZ(z);                                                                                                             


transform属性---3D旋转


1.rotate3d(x,y,z,angle)定义:         同时绕X,Y,Z轴三个方向旋转,顺时针旋转角度为angle

语法:

         transform:rotate3d(x,y,z,angle);                                                                                                             

2.rotateZ(z)定义:         绕Z轴方向旋转,顺时针旋转角度为angle

语法:

         transform:rotateZ(z);                                                                                                             


实例演示1

css3动画-transform属性

html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="pic">
<img src="img/6.jpg" width="212" height="300"/>
<p>像少年啦飞驰</p>
</div>
</body>
</html>

css文件

*{
margin: 0;
padding: 0;
}
#pic{
width: 212px;
height: 300px;
margin: 100px auto;
border: 2px solid gainsboro;
box-shadow: 0 0 8px darkgray;
position: relative;
}
#pic p{
width: 212px;
height: 300px;
background: whitesmoke;
text-align: center;
line-height: 300px;
font-family: "微软雅黑";
opacity: 0;
/*
* 定义初始状态的transform属性
* transition定义变换属性和周期,此处为所有属性,周期2s
*/
transform: translateY(-303px) rotate(130deg) rotateY(-270deg) rotateX(100deg) scale(0.5,0.5);
transition: all 2s;
}
#pic:hover p{
opacity: 1;
/*
* 定义变换后的状态
*/
transform: translateY(-303px) rotate(0deg) rotateY(0deg) rotateX(0deg) scale(1,1);
}

实例演示2

css3动画-transform属性

html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="pic">
<img src="img/6.jpg" width="212" height="300"/>
<p>我的世界就如一座城池</p>
</div>
</body>
</html>


css文件

*{
margin: 0;
padding: 0;
}
#pic{
width: 212px;
height: 300px;
border: 5px solid whitesmoke;
box-shadow: 0 0 0 8px pink;
margin: 100px auto;
overflow:hidden;
position: relative;

}
#pic:hover img{
transform: scale(1.5,1.5);
transition: all 2s;
}
#pic p{
width: 212px;
height: 20px;
background: black;
opacity: 0.5;
position: absolute;
bottom: -20px;
color: white;
font-family: "微软雅黑";
font-size: 13px;
text-align: center;

}
#pic:hover p{
bottom: 0px;
transition: bottom 1s;
}