zoukankan      html  css  js  c++  java
  • H5--第七课

    07-变换

    transform: 变换
    2D变换:
    rotate(d) 旋转,角度(补充1:角度的单位),受<变换基准>影响

    scale(x,y) 缩放,数值,代表缩放比例,默认1 ,受<变换基准>影响
    x:水平方向缩放比例,y:垂直方向缩放比例
    y可以缺省,缺省后第一个值同时表示x,y
    可拆分为scaleX(x) / scaleY(y)

    translate(x,y) 位移,带单位的数值/百分比
    x:水平方向位移量,y:垂直方向位移量
    可拆分为translateX(x) / translateY(y)
    注意:当数值为百分比时,参考对象是自身而不是父元素

    skew(x,y) 倾斜,角度,受<变换基准>影响
    x:水平方向倾斜量,y:垂直方向倾斜量
    可拆分为skewX(x) / skewY(y)

    3D变换:(表现出的3D效果受transform-style、perspective影响)
    rotate3D(x,y,z,d)
    x,y,z为数值,d为度数,合体的写法用的很少,可以使用下面三个拆分属性代替
    rotateX(x) / rotateY(y) / rotateZ(z)
    translate3D(x,y,z)
    ……
    scale3D(x,y,z)
    ……

    transform-origin: 变换基准
    值:具体的坐标值/百分比/(left/right/center/top/bottom)
    默认 center center

    transform-style: 指定元素的子元素展示的场景是在3D场景还是平面(投影)场景
    flat:默认 平面(投影)
    preserve-3d:3D场景

    perspective: 指定观察者与z=0平面的距离,从而让元素及子元素看起来有3D透视位置效果
    值:集体的带单位数值

    perspective-origin:透视基准
    值:取值类似于变换基准


    补充1:角度的单位
    deg :度数,一个圆 360 deg
    rad :弧度,一个圆 2π rad ≈ 6.283 rad
    turn :圈,一个圆 1 turn
    grad :梯度,一个圆 400 grad

  • 相关阅读:
    Arraylist和Linkedlist的区别
    list和map的区别
    collection和collections区别
    Linux操作命令(六)
    Linux操作命令(五)
    Linux操作命令(四)
    Linux操作命令(三)
    Linux操作命令(二)
    Linux操作命令(一)
    ProgrammingProjectList-文本操作
  • 原文地址:https://www.cnblogs.com/kaerbnvbgfq/p/6228602.html
Copyright © 2011-2022 走看看