移动端第九章变形

starry__sty

于 2020-10-25 19:51:07 发布

阅读量124

点赞数 1

分类专栏：移动端文章标签：移动端

本文链接：https://blog.csdn.net/starry__sty/article/details/109277740

版权

移动端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

transform:变换/变形

translate:移动
translate(X px,Y px);
rotate:旋转/负值就是倒转;
rotate(-360deg);	
scale:缩放
scale(x,y)
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:translateX(300px)*/
				/*transform:translateY(300px)*/
				/*transform:translate(300px,300px)*/
				transform:translate(-300px,300px)
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

旋转

<!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>

缩放

<!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>

扭曲

<!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>

综合写法

<!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: translate(300px,300px) rotate(360deg) scale(1.5) skew(40deg);
			}
		</style>
	</head>
	<body>
		<div>1</div>
	</body>
</html>

starry__sty

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端第九章变形

transform:变换/变形translate:移动translate(X px,Y px);rotate:旋转/负值就是倒转;rotate(-360deg); scale:缩放scale(x,y)skew:扭曲skew(x deg,y deg)移动<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <sty
复制链接

扫一扫