zoukankan      html  css  js  c++  java
  • css3 新特性(2D translate 移动,rotate 旋转 , scale 缩放)

    1.transform(转换)可以实现元素的位移,旋转,缩放等效果(可以简单理解为变形)

     移动:translate            旋转:rotate          缩放:scale

    2. 2D 转换之移动 translate

     可以改变元素在页面中的位置,类似定位。

     语法:

      transform:translate(x,y);  或者分开写

      transform:translateX( n );

      transform:translateY( n );

     重点:

      1. 定义 2D 转换中的移动,沿着 X 和 Y 轴移动元素

      2. translate 最大的优点:不会影响到其他元素的位置  

      3. translate 中的百分比单位是相对自身元素的translate:(50%,50%);

      4. 对行内标签没有效果

    3. 2D 转换之旋转 rotate

     2D 转换指的是让元素在 2维平面内顺时针或者逆时针旋转。

     语法:

      transform:rotate(度数) 

     重点:

      1. rotate 里面跟度数,单位是 deg 比如 rotate(45deg)

      2. 角度为正时,顺时针,负时,为逆时针

      3. 默认旋转的中心点是元素的中心点

    4. 2D转换中心点 transform-origin

     可以设置元素转换的中心点

     语法:

      transform-origin:x   y;

     重点:

      1. 注意后面的参数 x 和 y 用空格隔开

      2. x  y 默认转换的中心点是元素的中心点 (50%   50%)

      3. 还可以给 x y 设置 像素 或者 方位名词(top   bottom  left  right  center)

    5. 2D 转换之缩放 scale 

     缩放,顾名思义,可以放大和缩小,只要给元素添加上了这个属性,就能控制它放大还是缩小。

     语法:

      transform:scale(x,y);

     重点:

      1. 其中的 x 和 y 用逗号分隔,里面参数是数字,不跟单位,可以是小数

      2. transform:scale(1,1):宽和高都放大一倍,相对于没有放大

      3. transform:scale(2,2):宽和高都放大了2倍

      4. transform:scale(2):只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2,2)

      5. transform:scale(0.5,0.5):缩小

      6. scale 缩放最大优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子

    6. 2D 转换综合写法

     注意:

      1. 同时使用多个转换,其格式为:transform:translate()  roate()  scale()  等

      2. 其顺序会影响转换的效果(先旋转会改变坐标轴方向)

      3. 当我们同时有位移和其他属性的时候,记得要将位移放到最前

  • 相关阅读:
    04 16 团队竞技(第二场) 赛后总结
    HDU 1863 畅通工程 克鲁斯卡尔算法
    HUD 2544 最短路 迪杰斯特拉算法
    hdoj 4526 威威猫系列故事——拼车记
    HDU 3336 Count the string 查找匹配字符串
    Linux command line exercises for NGS data processing
    肿瘤基因组学数据库终结者:cBioPortal---转载
    lncRNA研究利器之"TANRIC"
    Python的collections模块中的OrderedDict有序字典
    python set
  • 原文地址:https://www.cnblogs.com/qtbb/p/11748190.html
Copyright © 2011-2022 走看看