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!!!

你可能感兴趣的:(2019-08-08来黑马程序员的第二十八天(上课))