学院动态


css3动画-transform属性

发布 : 杨欣      来源:前端开发技巧

发布日期 2021-10-19 14:11 点击量 50

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);

实例演示

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);
} 

 相关推荐

预约免费试听课
请填写您的姓名
请填写您的手机号
返回顶部