• Css3 笔记 动画 和定位属性


    transform 变形属性
    属性:translate 平移,rotate 旋转, scale 缩放,skew 倾斜

    ◆ translate :指定对象的2D平移
    第一个参数对应X轴,第二参数对应Y轴;如果第二个参数未提供,则默认为0;
    translate(10px,10px)
    X轴 往左边移动 对应第一个参数的值 就是正数值。
    Y轴 往下面移动 对应第二个参数的值 就是正数值。

    ◆ rotate :控制对象的2D旋转,需要先定义transform-origin属性;
    列:Rotate(90deg),transform-origin:0 0;
    角度值 为 正数值 对象顺时针转,负数对象逆时针转;

    transform-origin 如果不设置坐标,默认元素对象的中心点。
    transform-origin:0 0; 以元素的左上角为中心点旋转;

    ◆ scale: 指对象的2D缩放。可以同transform-origin 一起使用。
    第一个参数对应X轴 ;第二个参数对应Y轴;如果第二个参数未提供默认取第一个参数的值;
    例如:scale(0.5,0.5);
    参数值 为 1 时,不缩放,小于1时往里面缩小;大于1时,往大放。
    配合transform-origin使用时,是沿着中心点缩放。

    ◆ skew : 指定对象斜切;
    第一个参数对应轴,第二个参数对应Y轴;,如果第二个参数未提供默认为0;
    例如:skew(50deg,2deg);
    *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
    ◆ 3D
    ◆ style : 样式,变形样式;
    transform-style:preserve-3d; 此设置3D变形效果;
    X轴正方向往左边;Y轴正方向往下面;Z轴正方向面向屏幕前面,指向我们。
    translateX(x px) ;X轴平移
    translateY(y px) ;Y轴平移
    translateZ(z px) ;Z轴平移
    rotateX(x deg) ;沿着X轴进行旋转
    rotateY(y deg) ;沿着Y轴进行旋转
    rotateZ(z deg) ;沿着Z轴进行旋转

    ◆旋转中心设置:transform-origin
    X轴 可设置为:left 或 center 或 right;
    Y轴 可设置为:top 或 center 或 bottom;
    Z轴 可设置为:length px; 具体长度;

    *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
    ◆ transition 过度动画处理
    transition:<过渡属性名称><过渡时间><过渡模式>
    属性:property ,duration,timing-funciton,delay;
    property : 检索或设置对象中的参与过渡的属性;设置原始的那些属性参与动画。
    duration : 过渡动画的持续时间;
    timing-function : 检索或设置对象中过渡的动画类型(
    linear : 动画从头到尾的速度是相同的,
    ease : 动画以低速开始,然后加快,在结束前变慢,
    ease-in : 动画以低速开始,
    ease-out : 动画以低速结束,
    ease-in-out : 动画以低速开始和结束

    delay : 设置对象延迟过渡的时间。
    *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
    ◆ position 属性决定元素如何定位,通过top,bottom,left,right实现位置的改变;
    static:默认值,元素按照标准流的方式正常排列。
    *-*-*-*-*-*-*-*-*-*-*-
    relative:相对定位,相对元素自身原始位置,通过 top,bottom,left,right实现位置定位;
    当处于父级容器中时,相对父级容器内,本身位置作为标准,通过 top,bottom,left,right进行定位;
    *-*-*-*-*-*-*-*-*-*-*-
    absolute:绝对定位,相对浏览器窗口的定位。
    当父元素 是absolute定位或者relative时,那么子元素是按父元素进行absolute绝对定位。
    当父容器没有定位,那么子元素按浏览器窗口进行定位。
    *-*-*-*-*-*-*-*-*-*-*-
    fixed:绝对定位,相对于可视区域固定,不受父元素父容器限制,会随着可视区域边框移动而移动。

    超脱文档流,位置变化不影响其他标签或容器。 
    *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
    z-index
    可以设置元素的叠加顺序,但依赖定位属性
    z-index 大的元素会覆盖z-index小的元素
    z-index为auto的元素不参与层级比较;
    z-index为负值,元素被普通流中的元素覆盖;

  • 相关阅读:
    sort()函数与qsort()函数
    个人作业——软件工程实践总结作业
    个人作业——软件评测
    软件工程实践2019第五次作业
    软件工程实践2019第四次作业
    软件工程实践2019第三次作业
    软件工程实践2019第二次作业
    期末大作业
    第7次实践作业
    第6次实践作业
  • 原文地址:https://www.cnblogs.com/lanyubaicl/p/10579525.html
Copyright © 2020-2023  润新知