位移
-
语法
trannsform：translate(水平 移动距离，垂直移动距离)：
-
取值(正负均可)
像素单位数值
百分比(参照物为盒子自身尺寸)
注意：x轴正向为右，y轴正向为下
-
-
技巧
translate(如果只给出一个值，表示x轴方向移动距离) 单独设置某个方向的移动距离：translatex()&translatey（）
旋转
- 目标：使用rotate实现旋转效果
-
- 语法
transform：rotate(角度)； 注意：角度单位是deg
- 技巧：取值正负均可
取值为正，则顺时针旋转 取值为负，则逆时针旋转
转换原点
- 目标：使用transform-origin属性改变转换原点
- 语法：
默认原点是盒子中心点
- 取值
方位名词 (left，top，right，bottom，center) 像素单位数值 百分比(参照盒子自身尺寸计算)
缩放
目标：使用scale改变元素的尺寸
- 思考：改变元素的width或height属性能实现么
- 语法
-
- transform：scale(x轴缩放倍数，y轴缩放倍数)；
- 技巧
-
- 一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放
-
- transform：scale(缩放倍数)
-
- scale值大于1表示放大，scale值小于1表示缩小
渐变背景
目标：使用vackground-image属性实现渐变背景效果
- 渐变是多个颜色逐渐变化的视觉效果
- 一般用于设置盒子的背景
.box {
background-image: linear-gradient(
color:red,
color:pink
)
}
空间转换
目标：使用transform属性实现元素空间内的位移，旋转，缩放等效果
- 空间：是从坐标轴角度定义的。x，y和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
- 空间转换也叫3d转换
- 属性：transform
- 语法：
- transform：translate3d(x，y，z)
- transform：translateX(值)；
- transform：translateY(值)；
- transform：translateZ(值)；
- 取值(正负均可)
- 像素单位数值
- 百分比
透视
目标：使用perspective属性实线透视效果
- 思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？
- 答：近大远小，近清楚远模糊
- 思考：默认情况下，为什么无法观察到z轴位移效果？
- 答：z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观测远近效果
- 属性(添加给父级)
- perspective：值
- 取值：像素单位数值，数值一般在800-1200
空间旋转
目标：使用rotate实现元素空间旋转效果
- 语法
transform：rotateZ(值)
- 立体呈现
- 目标：使用transform-style：preserve-3d呈现立体图型
- 思考：使用perspective透视属性能否呈现立体图形？
- 答：不能，perspective只增加近大远小，近实远虚的视觉效果。
- 实现方法
- 添加 transform-style：preserve-3d； 使子元素处于真正的3d空间 默认值flat，表示子元素处在2d平面内呈现
