目录
一.2D转换（在二维平面内）
转换（transform）是css中具有颠覆性的特征之一可以实现元素的位移，旋转，缩放，倾斜等
移动：translate（x，y） translateX（ ） transformY （ ）
旋转： rotate（x， y） rotateX （） rotateY（）
缩放：scale（x，y） scaleX（） scaleY （）
倾斜：skew （x，y） skewX （） skewY（）
1.前端中的坐标轴
- X轴的正方向水平向右
- Y轴的正方向垂直向下
- Z轴的正方向水平向外
2.translate移动
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似于定位
语法：
div {
transform: translate( x, y);
}单位：px 或 %
重点：
- 定义2D转化中的移动，沿X轴和Y轴移动元素
- translate最大的特点： 不会影响其他元素位置
- translate 中的百分比是相对自身元素的宽度和高度
- 对行内标签无效
效果展示
2.rotate 2D旋转
2D旋转是让元素在2维平面顺时针或逆时针旋转
语法：
div {
transform: rotate (20deg);
}重点：
- rotate里面跟度数，单位是deg 比如： rotate （30deg）；
- 角度为正则顺时针旋转，角度为负逆时针旋转
- 默认的旋转中心是元素的中心点
案例展示：
改变旋转中心 transform-orgin
语法：
div {
transform-origin: x y;
}重点：
注意参数 x和y 用空格隔开
x y 默认转换的中心点（50%，50%）
还可以给x y设置方位名词或像素
3.scale缩放
缩放，顾名思义，可以放大缩小
语法：
div {
transform: scale(x, y)
}x y 是放大倍数
重点：
注意x和y用逗号隔开
transform：scale（1，1）高宽1：1 没有缩放
如只写一个参数，则第二个参数默认相同
scale最大的优势：可以设置转换中心点缩放，其不会影响其他盒子
效果展示
2D转换的综合写法
1.同时使用多个转换时，其格式为：transform： translate（） rotate（）；等 因为一个盒子只能有一个transform
2.书写顺序会想影响转换效果（先旋转会改变坐标轴方向）
二.3D转换（在三维立体中转换）
主要知识：
3D移动：translate3d（x，y，z）
3D旋转： rotate3d（x， y，z）
透视 perspective
3D呈现 transform-style
3D缩放 scale（x，y，z）
1. 3D移动translate3d
3D移动就是在2D的基础上多加了一个Z轴Y
- translateX（100px）；仅在X轴上移动
- translateY（100px）；仅在Y轴上移动
- translateZ（100px）；仅在Z轴上移动
- translate3d（100px，100px，100px）；分别在XYZ轴上移动
效果展示
我们发现关于Z轴在效果展示中没有表现出来，此时我们就要引入透视
透视 perspective
- 在2D平面中产生近大远小的视觉立体
- 如果想在网页中产生3D效果需要透视
- 透视我们也称为视距：视距就是眼睛到屏幕的距离
- 视距越大平面成像越小，视距越小平面成像越大
- 透视的单位是像素（px）
语法：
div {
perspective: 200px;
}注：视距是写在被观察元素的父元素中
2.3D旋转 rotate3d（）
3D旋转可以让元素在三维平面沿X轴，Y轴，Z轴或自定义轴旋转
- rotateX （45deg） 沿X轴
- rotateY（45deg） 沿Y轴
- rotateZ （45deg） 沿Z轴
- rotate3d（1，0，1，45deg） 45deg代表旋转角度 X Y Z 是数字代表旋转45deg的倍数
效果展示
3D呈现 transform-style
- 控制子元素是否开启三维环境
- transform-style： flat 子元素不开启3D立体效果
- transform-style：preserve-3d； 子元素开启3D效果
- 代码写入父盒子，影响的是子盒子
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
