今天是上就业班的第一天,心里有点小激动,因为不知道会面临什么,是课程的内容更多还是课程难度更大,这些都是未知的,但是实际上课的内容还是比较中规中矩的,主要的知识点如下:
一、过渡
属性名: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!!!