CSS3 03讲

• transform变换
  • transform-origin变换基点x y的值
    • 默认center center
    • 可设置成0 0,50% 50%等
  • 移动translate
    • translateX() 水平方向移动
    • translateY() 垂直方向移动
    • translate(x,y) 水平垂直方向移动，两个值都不能省略，只有一个值默认为X
    • 案例，解决box2在box1中居中的问题
  • 旋转rotate(<angle>)
    • rotate(45deg) ，只有1个值默认Z轴
    • rotateX(45deg)
    • rotateY(45deg)
    • rotateZ(45deg)
    • rotate3D（）自行了解
    • perspective:1000px,定义视图多少的3D元素，视图透视，值越小视觉冲击力越大，此属性要加给父元素
  • scale 缩放
    • scaleX() 等于0，缩小到不见； 小于1，缩小；大于1，放大；值没有单位，代表缩放倍数
    • scaleY()
    • scale() 如果只有1个值，代表xy等比例缩放
  • skew 扭曲
    • skewX() 值为度数deg 水平方向
    • skewY()垂直方向
    • skew() 如果只有1个值，x轴方向扭曲
• 过渡 transition
  • transition-property:width,backgroung,...;过渡的属性
    • 值为all，代表所有
  • transition-duration:2s;过渡持续时间，1s=1000毫秒ms
    • transition-duration:1s,2s;第一个属性用时1s,第二个属性用时2s
  • transition-timing-function，过渡变化的速度
    • 默认值 ease逐渐变慢
    • linear匀速
    • ease-in 加速
    • ease-out减速
    • ease-in-out先加速再减速
    • cubic-bezier(x1,y1,x2,y2)自定义 贝塞尔曲线
    • steps()步数 ，跃阶函数
  • transition-delay过渡延迟
• 背面不可见 backface-visiblity,定义元素背面向屏幕时是否可见
  • 默认visible可见
  • hidden不可见
• 滤镜filter 通常使用百分比，也可用小数来表示，有如下值
  • blur(px)，如2px，值越小越清晰，越大越模糊
  • hue-rotate(deg)给图像应用色相旋转
  • opacity(%)转化图像的透明程度
  • brightness(%) 0%完全变黑 100%亮度不变 大于100%变亮
  • grayscale(%)灰度图，值越大越灰，到100%
  • invert(%)色相翻转，100%类似于胶片照片
  • saturate(%)小于1饱和度降低，100%无变化，大于100%饱和度变高