CSS转换

最新推荐文章于 2019-11-11 08:33:52 发布

高鹏飞白羊

最新推荐文章于 2019-11-11 08:33:52 发布

阅读量91

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_43755916/article/details/102456976

版权

web前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

改变元素在页面中位置，大小，角度以及形态的一种方法
2D转换：只在x轴和y轴上发生转换效果
3D转换：增加了z轴的转换效果

转换的属性

transform：
取值： none 默认值无任何转换效果
transform-function 一个活多个转换函数，多个的中间用空格隔开
transform-origin
转换原点
取值： px数字的
%
关键字 left center right top bottom
取值个数：2个值，表示圆点在x轴和y轴上的位置
3个值，表示圆点在x轴和y轴，z轴上的位置
位移
translate(X,Y)
translateX(X) translateY(Y)

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}	
			div{
				width:200px;
				height:200px;
				position:absolute;
				top:0;
				left:0;
			}
			#d1{
				background:#f00;
			}
			#d2{
				background:#00f;
				transform:rotate(45deg) translateX(50px) translateY(80px);
				transform-origin:bottom left;
			}
	</style>
	</head>
	<body>
		<div id="d1">
		</div>
		<div id="d2">
		</div>
	</body>
	
</html>

缩放
改变元素在页面中的尺寸
transform:scale();
取值 scale（value）
value横向和纵向的缩放比例，默认为1
scale(X,Y)
scaleX()
scaleY()

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}	
			div{
				width:200px;
				height:200px;
				position:absolute;
				top:0;
				left:0;
			}
			#d1{
				background:#f00;
			}
			#d2{
				background:#00f;
				transform:rotate(45deg) translateX(50px) translateY(80px);
				transform-origin:bottom left;
			}
			#d2:hover{
				transform:scale(-1.5);
			}
			
			
	</style>
	</head>
	<body>
		<div id="d1">
		</div>
		<div id="d2">
		</div>
	</body>
	
</html>

角度
transform:rotate(ndeg);
n为正，顺时针
n为负，逆时针
倾斜
transform:skew(30deg,20deg);
transform:skewX(30deg);
transform:skewY(30deg);
合并方法
matrix
matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

高鹏飞白羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS转换

改变元素在页面中位置，大小，角度以及形态的一种方法2D转换：只在x轴和y轴上发生转换效果3D转换：增加了z轴的转换效果转换的属性transform：取值： none 默认值无任何转换效果transform-function 一个活多个转换函数，多个的中间用空格隔开transform-origin转换原点取值： px数字的%关键字 left center right top ...
复制链接

扫一扫