移动端第九章变形

最新推荐文章于 2022-09-22 10:46:22 发布

LW0512

最新推荐文章于 2022-09-22 10:46:22 发布

阅读量155

点赞数

分类专栏：移动端

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/108928392

版权

移动端专栏收录该内容

25 篇文章

订阅专栏

这篇博客介绍了移动端视图的变形技术，包括使用CSS的transform属性进行移动（translate）、旋转（rotate）、缩放（scale）和扭曲（skew）的操作，并给出了详细的实例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

变形

变换/变形：transform

移动：translate

translate(X px,Y px);

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background: red;
				margin: 100px auto;
				/*过渡属性*/
				transition: 1s;
			}
			div:hover{
				/*transform:translateX(300px)*/
				/*transform:translateY(300px)*/
				/*transform:translate(300px,300px)*/
				transform:translate(-300px,300px)
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

旋转/负值就是倒转:rotate

rotate(-360deg);

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background: red;
				margin: 100px auto;
				/*过渡属性*/
				transition: 1s;
			}
			div:hover{
				/*transform: rotateX(360deg);*/
				/*transform: rotateY(360deg);*/
				/*transform: rotate(360deg);*/
				transform: rotate(-360deg);
				/*正数是顺时针旋转，负数是逆时针旋转*/
			}
		</style>
	</head>
	<body>
		<div>1</div>
	</body>
</html>

缩放:scale

scale(x,y)；

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background: red;
				margin: 100px auto;
				/*过渡属性*/
				transition: 1s;
			}
			div:hover{
				/*transform: scaleX(2);*/
				/*transform: scaleY(2);*/
				/*transform: scaleY(.5);*/
				/*transform: scale(.5);*/
				/*transform: scale(0);*/
				transform: scale(-2);
			}
		</style>
	</head>
	<body>
		<div>1</div>
	</body>
</html>

扭曲:skew

skew(x deg,y deg)

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background: red;
				margin: 100px auto;
				/*过渡属性*/
				transition: 1s;
			}
			div:hover{
				/*transform: skewX(-80deg);*/
				/*transform: skewY(50deg);*/
				/*transform: skew(50deg,20deg);*/
			}
		</style>
	</head>
	<body>
		<div>1</div>
	</body>
</html>