目录
1、2D转换概念
2D
转换
-
2D
转换是改变标签在二维平面上的位置和形状 -
移动:
translate
-
旋转:
rotate
-
缩放:
scale
2、2D 转换 translate
- x 就是 x 轴上水平移动
- y 就是 y 轴上水平移动
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
重点知识点
2D
的移动主要是指 水平、垂直方向上的移动translate
最大的优点就是不影响其他元素的位置translate
中的100%单位,是相对于本身的宽度和高度来进行计算的- 行内标签没有效果
代码演示
div {
background-color: lightseagreen;
width: 200px;
height: 100px;
/* 平移 */
/* 水平垂直移动 100px */
/* transform: translate(100px, 100px); */
/* 水平移动 100px */
/* transform: translate(100px, 0) */
/* 垂直移动 100px */
/* transform: translate(0, 100px) */
/* 水平移动 100px */
/* transform: translateX(100px); */
/* 垂直移动 100px */
transform: translateY(100px)
}
3、2D 转换 rotate
-
rotate 旋转
2D
旋转指的是让元素在二维平面内顺时针或者逆时针旋转
-
rotate
语法
/* 单位是:deg */
transform: rotate(度数)
- 重点知识点
rotate
里面跟度数,单位是deg
- 角度为正时,顺时针,角度为负时,逆时针
- 默认旋转的中心点是元素的中心点
- 代码演示
img:hover {
transform: rotate(360deg)
}
使用步骤:
- 给元素添加转换属性
transform
- 属性值为
rotate(角度)
如transform:rotate(30deg)
顺时针方向旋转30度
div{
transform: rotate(0deg);
}
设置元素旋转中心点(transform-origin)
transform-origin
基础语法
transform-origin: x y;
- 重要知识点
- 注意后面的参数 x 和 y 用空格隔开
- x y 默认旋转的中心点是元素的中心 (50% 50%),等价于
center
center
- 还可以给 x y 设置像素或者方位名词(
top
、bottom
、left
、right
、center
)
4、2D 转换之 scale
-
scale
的作用- 用来控制元素的放大与缩小
-
语法
transform: scale(x, y)
-
知识要点
- 注意,x 与 y 之间使用逗号进行分隔
transform: scale(1, 1)
: 宽高都放大一倍,相当于没有放大transform: scale(2, 2)
: 宽和高都放大了二倍transform: scale(2)
: 如果只写了一个参数,第二个参数就和第一个参数一致transform:scale(0.5, 0.5)
: 缩小scale
最大的优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子
-
代码演示
div:hover { /* 注意,数字是倍数的含义,所以不需要加单位 */ /* transform: scale(2, 2) */ /* 实现等比缩放,同时修改宽与高 */ /* transform: scale(2) */ /* 小于 1 就等于缩放*/ transform: scale(0.5, 0.5) }
5、2D 转换综合写法以及顺序问题
- 知识要点
- 同时使用多个转换,其格式为
transform: translate() rotate() scale()
- 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
- 但我们同时有位置或者其他属性的时候,要将位移放到最前面
- 代码演示
div:hover {
transform: translate(200px, 0) rotate(360deg) scale(1.2)
}