2019-08-08来黑马程序员的第二十八天（上课）

今天是上就业班的第一天，心里有点小激动，因为不知道会面临什么，是课程的内容更多还是课程难度更大，这些都是未知的，但是实际上课的内容还是比较中规中矩的，主要的知识点如下：

---

一、过渡

属性名：transition

属性值：过渡的时间 取值是多少秒 如 1s

作用：让一个元素的样式慢慢的变化

注意点：1、过渡的属性给需要过渡的元素设置 2、过渡效果需要两个状态样式不同才能生生效

3、过渡的属性加在不同的状态下效果是不一样的 如：加在hover状态下面，只有鼠标进入才有过渡的效果，鼠标移出之后没有过渡的效果

---

二、2D转换

属性名：transform

缩放scale：取值：scaleX(倍数) 沿着X轴进行缩放 scaleY(倍数) 沿着Y轴进行缩放 scale(X轴倍数，Y轴倍数) X轴Y轴同时缩放 如果X轴和Y轴缩放倍数是一样的，可以只写一个 如 transform:scale(2)

旋转rotate 取值：rotate(旋转的角度) 如transform:rotate(45deg) 注意 是顺时针旋转的

平移translate 取值：translateX(距离) 沿着X轴进行平移 translateY(距离) 沿着Y轴平移 translate(X,Y) 沿着X轴和Y轴同时平移 注意点：1、取值可以是具体的数值 也可以是百分比 取值是百分比的时候，参照依据是自己的宽高  3、如translate(100px) 表示只是沿着X轴移动100px

倾斜skew： skewX(30deg) X轴不动，Y轴沿着X轴旋转30deg skewY(30deg) Y轴不动，X轴沿着Yz轴旋转30deg skew(30deg,30deg) 第一个取值是 X轴不动，Y轴沿着X轴旋转30deg  第二个取值是Y轴不动，X轴沿着Yz轴旋转30deg 注意点: 如skew(30deg) 表示只是 X轴不动，Y轴沿着X轴旋转30deg

转换原点transform-origin: 取值：1、方位名词 2、具体的坐标值 注意：方位名词的取值和background-position一致

转换的简写：注意如果先写旋转的话，坐标轴会跟着旋转

---

三、3D转换

属性名：transform

坐标系：X轴 屏幕水平向右 Y轴屏幕垂直向下 Z垂直于屏幕朝向自己

旋转：沿着坐标轴轴旋转就是3D旋转 取值 rotateX(90deg)  rotateY(90deg) rotate(90deg)

判断旋转的方向：左手抓住坐标轴，大拇指朝向坐标轴的正方向 四个手指的方向为旋转的方向 

平移：沿着Z轴平移就是3D平移 如transform:translateZ(100px)

视距perspective 作用：让子元素看起来有近大远小的效果 是给父元素设置的 取值：如1000px 表示的是观察着距离浏览器元素的距离 值越大近大远小的效果越不明显 值越小近大远小的效果越明显

3D元素transform-style:perserve-3d 作用：让一个元素成为3D的元素 取值：flat:成为平面的元素  perserve-3d 成为3D元素

---

好了今天的知识点就总结到这里，Fighting！！！