zoukankan      html  css  js  c++  java
  • transform

    transform:none|rotate|scale|skew|translate|matrix;(以空格分开)

    none:不进行转换;

    rotate:旋转。正数是顺时针旋转,负数为逆时针旋转。如transform:rotate(45deg);

    scale:缩放。scale(x,y)水平,垂直同时缩放,scaleX()仅水平缩放;scaleY(),仅垂直缩放。他是指放大或缩小多少倍来取值。

    skew:扭曲。如transform:skew(30deg,10deg),第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切。第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度。

    translate:移动。translate(x,y)水平方向和垂直方向同时移动,当值为负数时,反方向移动物体,其基点默认为元素 中心点,也可以根据transform-origin进行改变基点;translateX:只向x轴进行移动元素;translateY:只向Y轴进行移动元素

    transform-origin(X,Y):用来设置元素的运动的基点(参照点)。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px,其中X也可以是字符参数值left,center,right;Y和X一样除了百分值外还可以设置字符值top,center,bottom,这个看上去有点像我们background-position设置一样;下面我列出他们相对应的写法:

    1、top left | left top 等价于 0 0 | 0% 0%

    2、top | top center | center top 等价于 50% 0

    3、right top | top right 等价于 100% 0

    4、left | left center | center left 等价于 0 50% | 0% 50%

    5、center | center center 等价于 50% 50%(默认值)

    6、right | right center | center right 等价于 100% 50%

    7、bottom left | left bottom 等价于 0 100% | 0% 100%

    8、bottom | bottom center | center bottom 等价于 50% 100%

    9、bottom right | right bottom 等价于 100% 100%

    其中 left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%而top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%;如果只取一个值,表示垂直方向值不变

  • 相关阅读:
    机器学习笔记之Boosting算法
    机器学习笔记之多重共线性问题以及如何解决
    机器学习笔记之在Visual Studio Code中使用Jupyter Notebook
    高数学习笔记之范数与距离度量(python实现)
    机器学习笔记之线性回归最小二乘法(公式推导和非调包实现)
    机器学习笔记之线性回归数学推导
    高数笔记之期望、方差与最小二乘法
    DataTable 去重 测试
    vs2019 项目历史记录
    sql 求和 语句
  • 原文地址:https://www.cnblogs.com/7-Eleven/p/5635848.html
Copyright © 2011-2022 走看看