一、2D/3D的转换:

transform向元素应用 2D 或 3D 转换。

(1)平移属性:

transform:translate(x,y)其中只写一项的值为左右平移的值。(数值的正负性:左负右正,上负下正

transform:translateX()仅限左右移动。

transform:translateY()仅限上下移动。

(2)旋转属性:

transform:rotate(Xdeg)括号中填需要旋转的角度值,正值顺时针,负值逆时针

(3)缩放属性:

transform:scale(  )括号中填写数值。大于1为放大,0~1之间的为缩小

(4)倾斜属性:

transform:skew(Xdeg,Xdeg)

transform-origin允许你改变被转换元素的位置。

transform-origin:right(left) top(bottom) % 具体像素

二、过渡属性:

transition简写属性,用于在一个属性中设置四个过渡属性。

transition:过渡对象 过渡时间 过渡时间的频率 延迟时间

三、@keyframes动画(自定义动画):

animation所有动画属性的简写属性,除了 animation-play-state 属性。

animation调用自定义动画。

animation-name规定 @keyframes 动画的名称。
animation-duration规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function规定动画的速度曲线。

其中可以用%来定义动画的开始和结束:开头为0%,结尾为100%。

四、媒体查询功能:

media属性规定被链接文档将显示在什么设备上。media属性用于为不同的媒介类型规定不同的样式。

(1)media的调用方式:

方法一:用link调用

media=“all and (屏幕尺寸分界像素)”

方法二:在css 页面列表中

@media书写

五、自创属性:

只要在自创的属性名称前面加上“data-”就可以自创属性。

然后在后续中的文本中用content:“(“attr(data-自创属性名)”)”调用即可。

六、弹性盒子(手机端用到的比较多):

改变顺序:divection 属性为rtl(right-to-left)

flex-direction:弹性子元素在父元素中的位置