转换(transform) 是CSS3中具有颠覆性的特征之一,它可以实现元素的位移、旋转、缩放等效果,转换可简单理解为变形的意思。
以下是比较常用的三个属性:
- 移动:translate
- 旋转:rotate
- 缩放:scale
二维坐标系
2D转换是改变在二维平面上的位置和形状的一种技术,在学习2D转换之前 首先得了解一下二维坐标系
在数学中 ,坐标系是下面这样的
但是在网页中,二维坐标系是下面这样的
2D转换之移动-translate
translate是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位
1. 语法
translate2D转换有三种语法形式,可以x,y轴可以混合写也可以分开写
transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>2D转换</title>
<style>
div {
background-color: skyblue;
width: 300px;
height: 300px;
transform: translate(50px, 50px);
}
</style>
</head>
<body>
<div>测试案例</div>
</body>
</html>
2.重点总结
- 定义2D转换中的移动,沿着X和Y轴移动元素
- translate量大的优点:不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的:translate(50%,50%)
- 对行内标签没有效果
2D转换之旋转-rotate
2D旋转指定元素在二维平面内顺时针旋转或者逆时针旋转
1. 语法
transform:rotate(度数);
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>2D转换</title>
<style>
div {
background-color: skyblue;
width: 300px;
height: 300px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div>测试案例</div>
</body>
</html>
2. 重点总结
- rotate里面限制度数,单位是deg
- 角度为正时顺时针旋转,为负时逆时针旋转
- 默认旋转的中心点是元素的中心点
3. 改变旋转中心点-transform-origin
- 语法:
transform-origin:x,y;
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>2D转换</title>
<style>
div {
background-color: skyblue;
width: 300px;
height: 300px;
transform: rotate(90deg);
transform-origin: right bottom;
}
</style>
</head>
<body>
<div>测试案例</div>
</body>
</html>
- 重点总结:
注意后面的参数x,y是用空格隔开的
x,y默认转换的中心点是元素的中心点(50% 50%)
可以给x y设置 像素 或者是方位名词 (top bottom left right center)
2D转换之缩放-scale
scale可以实现元素的放大缩小
1. 语法
transform:scale(x,y);
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>2D转换</title>
<style>
div {
background-color: skyblue;
width: 300px;
height: 300px;
transform: scale(1.5);
}
</style>
</head>
<body>
<div>测试案例</div>
</body>
</html>
2.重点总结
- 注意其中的x,y使用逗号分隔的
- transform:scale(1,1)相当于当前元素的1倍,元素并没有放大
- transform:scale(2,2)相当于当前元素的2倍,元素放大原型元素的2倍
- transform:scale(2)当括号中只写一个元素相当于scale(2,2)
- transform:scale(0.5,0.5)表示缩小一半
- scale缩放的最大优势:可以设置转换中心点缩放,默认的是以中心缩放,而且不影响其他盒子
2D转换的综合写法
语法
transform:translate() rotate() scale();
注意:
- 同时使用多个转换,格式为:transform:translate() rotate() scale()
- 其顺序会影响转换的效果。(先旋转会改变坐标方向)
3. 当我们同时有位移和其他属性时,记得将位移放在最前面