学习02-css（过渡，焦点选择器，属性选择器，结构伪劣选择器，伪元素选择器，2D概念，3D概念）

css过渡

transtion：要过渡的属性 花费时间 运动曲线 何时开始；

transition	简写属性，用于在一个属性中设置四个过渡属性
transition-property	规定应用过渡的css属性的名称
transition-duration	定义过渡效果花费的时间，默认是0
transtion-timing-function	规定过渡效果的时间曲线，默认是ease
transtion-delay	规定过渡效果何时开始，默认0

运动曲线

linear	匀速
ease	逐渐慢下来
ease-in	加速
ease-out	减速
ease-in-out	先加速后减速

焦点选择器

:focus

伪类选择器用于焦点的元素

属性选择器

E[att]	选择具有att属性的E元素
E[att="val"]	选择具有att属性且属性值等于val的E元素
E[att^="val"]	匹配具有att属性，且值以val开头的E元素
E[att$="val"]	匹配具有att属性，且值以val结尾的E元素
E[att*="val"]	匹配具有att属性，且值中含有val的E元素

结构伪劣选择器

E：first-child	匹配父元素中的第一个子元素E
E：last-child	匹配父元素中最后一个E元素
E：nth-child（n）	匹配父元素中的第n个子元素E
E：first-of-type	指定类型E的第一个
E：last-of-type	指定类型E的最后一个
E：nth-of-type（n）	指定类型E的第n个

伪元素选择器

：：before	在元素内部的前面插入内容	必须有content属性添加文本
：：after	在元素内部的后面插入内容	必须有content属性添加文本

2D概念

移动

transform:translate(100px,100px); //移动
transform:translateX(n); //x轴移动
transform:translateY(n); //Y轴移动

旋转

transform：rotate（度数）; //单位deg
transform-origin：x  y; //转换中心点设置

缩放

transform：scale（x，y）; //缩放

综合写法

transform：translate（150px，50px） rotate（180deg） scale（1.2）；

3D概念

三维坐标系

x轴	水平向右	x右边是正值，左边是负值
y轴	垂直向下	y轴下面是正值，上面是负值
z轴	垂直屏幕	往外是正值，往里是负值

transform

3D位移	translate3d（x，y，z）
3D旋转	rotate3d（x，y，z，45deg）
3D呈现	transfrom-style

透视

perspective

 

 

 

来源：oschina

链接：https://my.oschina.net/u/4454049/blog/3176168