- 转换: 是css3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果
移动(translate)
- 语法:transform:translate(x, y) x轴和y轴的位置,
注意:这里的y轴和数学中的y轴是反的。
- 如果只需要移动一条轴可以分开写
transform:translateX(值)
transform:translateY(值)
- 定义2D转换中的移动,沿着X和Y轴移动元素
- translate最大的优点,不会影响其他元素的位置
- translate中的百分比单位是相对于自身元素的translate(50%,50%)
- 对行内标签没有效果
旋转(rotate)
- 语法:transform:rotate(度数) 单位deg
- 角度为正,顺时针。角度为负,逆时针
- X,Y默认旋转的中心点是元素的中心点(50% 50%),等价于center,center
- 还可以给x y设置 像素 或者方位名词(left,bottom,right,top, center)
比如left,bottom就是左下角
如何设置元素旋转的中心点
- **语法:**transform-origin: x y;
缩放(scale)
- transform:scale(1,1)宽高都放大一倍,相当于没有放大
- transform:scale(2,2)宽高都放大2倍
- transform:scale(2) 只写一个参数,第二个参数和第一个参数一样
- transform:scale(0.5,0.5)小于一就是缩小
倾斜(skew)
- skew() 函数定义了一个元素在二维平面上的倾斜转换
- skew()方法跟translate()方法、scale()方法一样,也有3种情况:
- skewX(x):使元素在水平方向倾斜(X轴倾斜),方法会保持高度
- skewY(y):使元素在垂直方向倾斜(Y轴倾斜),方法会保持高度
- skew(x,y):使元素在水平方向和垂直方向同时倾斜
X轴和Y轴同时倾方法会先按照skewX方法倾斜,然后按照skewY方法倾斜
- 语法:transform:skew(x,y)单位deg
2D转换综合写法
- 同时使用多个转换,其格式为: transform:translate() rotate() scale()…等
- 其顺序会影响转换的效果(先旋转会改变坐标)
- 当我们同时有位移和其他属性的时候,记得要将位移放在最前面
简单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<p>鼠标移到div</p>
</body>
<style>
div{
width: 50px;
height: 50px;
background-color: aqua;
transition: all .5s;
}
div:hover {
transform:translate(200px,200px) rotate(45deg) scale(2.5)
}
</style>
</html>